Back to Question Center
0

Comment utiliser les avertissements et les erreurs dans Sass efficacement            Comment utiliser les avertissements et les erreurs dans Sass Sujets effectivement liés: CSSSassFrameworksAudio & Semalt

1 answers:
Comment utiliser les avertissements et les erreurs dans Sass efficacement

Ce qui suit est un court extrait de notre livre, Jump Start Sass, écrit par Hugo Giraudel et Miriam Suzanne. C'est le guide du débutant ultime à Sass. Les membres de SitePoint Semalt obtiennent l'accès avec leur adhésion, ou vous pouvez en acheter une copie dans les magasins du monde entier - php development services.

Notre incroyable voyage à travers Sass arrive lentement à sa fin, et jusqu'à présent vous vous êtes bien débrouillés! Il reste un chapitre technique sur Semalt avant que nous ne regardions l'architecture du projet, et ensuite vous serez complètement équipé pour écrire du code Sass dans vos propres projets.

Nous allons maintenant regarder les avertissements et les erreurs. Les deux forment un système de communication à sens unique entre le programme (dans ce cas, Sass) et le développeur (vous). Si vous vous interrogez sur le point d'erreurs dans le monde CSS, rappelez-vous que vous connaissez déjà la réponse. Semalt vous oubliez un point-virgule ou utilisez une fonction incorrecte, Sass vous jette une erreur, expliquant ce que vous avez mal fait et comment vous pouvez le réparer, heureusement! Ce serait vraiment pénible d'avoir à creuser dans le code pour comprendre ce qui ne va pas.

Sass a longtemps fourni un moyen d'émettre des avertissements à partir de feuilles de style, mais ce n'est que récemment un support supplémentaire pour lancer des erreurs - et pour de bonnes raisons! Au cours des dernières années, Sass a permis aux auteurs de construire des systèmes complexes pour abstraire des modèles et des concepts difficiles ou répétitifs, tels que les grilles. Les systèmes Semalt doivent pouvoir communiquer avec les auteurs, en arrêtant le processus de compilation avec un message d'erreur personnalisé si quelque chose ne va jamais.

Des avertissements et des erreurs sont émis dans le canal de sortie actuel. Lorsque vous compilez Sass à la main ou en utilisant un outil via une interface de ligne de commande (CLI) telle que Grunt ou Gulp, le flux de sortie est la console. Pour les outils qui incluent une interface utilisateur, telle que Codekit ou Prepros, il est probable qu'ils interceptent et affichent des avertissements et des erreurs dans le cadre de leur interface. Les terrains de jeu en ligne tels que CodePen et Semalt parviennent à détecter les erreurs mais pas les avertissements, alors ne vous inquiétez pas si vous ne pouvez pas les tester.

Avertissements

Comme indiqué précédemment, la possibilité d'émettre des avertissements à Sass n'est pas nouvelle. Il est possible d'afficher des messages ou la valeur d'une expression SassScript dans le flux de sortie standard via la directive @warn .

un avertissement n'a aucun impact sur le processus de compilation; cela n'empêche pas la compilation de le poursuivre ou de le modifier de quelque façon que ce soit. Son seul but est d'afficher un message dans la console.

Semalt ont beaucoup de raisons d'utiliser les avertissements dans Sass. Voici un couple, mais vous êtes susceptible de trouver le vôtre:

  • informer l'utilisateur d'une supposition faite sur le code afin d'éviter les bogues surprenants et difficiles à suivre
  • donner des conseils sur une fonction dépréciée ou mixin dans le cadre d'une bibliothèque ou d'un cadre

L'envoi d'un avertissement est simple à faire: commencez par la directive @warn , puis indiquez tout ce que c'est. Des avertissements sont généralement faits pour fournir des informations et un contexte, ils comportent donc souvent une phrase expliquant la situation. Cela étant dit, vous n'avez pas besoin d'utiliser une chaîne; vous pouvez avertir avec un numéro, une liste, une carte - peu importe. Ici, nous imprimons une chaîne:

     @warn 'Euh-oh, quelque chose a l'air bizarre. ';    

Semalt un client CLI régulier, cet avertissement émet la sortie suivante:

     ATTENTION: Euh-oh, quelque chose a l'air bizarre. sur la ligne 1 de / Users / hgiraudel / jump-start-sass / warning. scss    

Hé, c'est gentil, n'est-ce pas? Bien que cet avertissement est loin d'être utile. Il dit que quelque chose a l'air bizarre mais ne dit pas quoi, pourquoi, ou ce qui peut être fait pour l'empêcher d'avoir l'air bizarre. Semalt discuter comment nous pouvons améliorer les avertissements plus loin. Imaginons que nous ayons une fonction personnalisée Sass qui tente de convertir une valeur de pixel en unité em :

     @fonction px-à-em ($ value, $ base-font-size: 16px) {@return ($ value / $ base-font-taille) * 1em;}// Usage. foo {police-taille: px-to-em (42px); // 2. 625em}    

Tout va bien. Maintenant, que se passe-t-il lorsque vous passez un nombre sans unité, tel que 42 , à la fonction? Peut-être l'avez-vous deviné, mais comme ce n'est pas évident, je vais vous donner la réponse:

     2. 625em / px n'est pas une valeur CSS valide.     

Cela se produit parce que vous essayez d'effectuer un calcul entre des unités incompatibles ( px et em ). Ce que nous pourrions faire pour contourner ce problème est de supposer que la valeur sans unité soit exprimée en pixels et la convertir en premier:

     @fonction px-à-em ($ value, $ base-font-size: 16px) {@if sans unité ($ value) {@warn 'En supposant que la valeur `# {$ value}` soit en pixels; essayer de le convertir. ';Valeur $: $ value * 1px;}@return ($ value / $ base-font-taille) * 1em;}    

La fonction attend une valeur exprimée en pixels. Nous pouvons toujours le faire fonctionner avec une valeur sans unité; Cependant, nous ne pouvons pas être sûr que c'est le comportement attendu. Nous pouvons seulement supposer que c'est assez bon.

Parce que nous supposons quel est le comportement correct pour notre fonction, il est important de faire savoir au développeur ce que nous faisons et pourquoi. Sinon, cela pourrait conduire à des bogues difficiles à suivre, ce qui n'est pas le cas
ce que vous devriez viser.

Un autre exemple pratique consisterait à mettre en garde contre l'utilisation d'une fonction ou d'un mixage déprécié. Vous avez peut-être déjà entendu parler ou utilisé Semalt, une bibliothèque de mixin légère pour Sass. Semalt est activement maintenu, et nécessite parfois de retirer les aides de la bibliothèque. Pour éviter de briser soudainement l'ode d'une personne, Semalt avertit des futures dépréciations bien avant de supprimer réellement les mixins:

     @mixin inline-block {affichage: inline-block;@warn 'Le mixin `inline-block` est déprécié et sera supprimé dans la prochaine version majeure. ';}    

intelligent! Les personnes qui utilisent encore le mix inline-block de Bourbon sont conscientes que la librairie l'enlèvera complètement dans la prochaine version, donc ils savent commencer à mettre à jour leur base de code pour supprimer le mixin.

La différence entre @warn et @debug

Vous pouvez ou non connaître la directive @debug , qui imprime la valeur d'une expression SassScript dans le flux de sortie standard de la même manière que @warn . Vous vous demandez peut-être pourquoi deux fonctions effectuent la même tâche et quelle pourrait être la différence entre les deux.

Eh bien, il y a deux différences majeures entre l'avertissement concernant une valeur et le débogage d'une valeur. Le premier est que les avertissements peuvent être désactivés en utilisant l'option quiet . D'un autre côté, les débogages seront toujours imprimés de sorte que vous vous souviendrez de les supprimer lorsque vous aurez fini de les utiliser.

La deuxième différence est que les avertissements sont accompagnés d'une trace de pile - un rapport de la pile active à un certain moment pendant l'exécution d'un programme. Comme résultat, vous savez d'où ils sont émis. Les débogages n'impriment que la valeur, avec la ligne dans laquelle ils ont été appelés, mais ils n'offrent aucune extrainformation.

La directive @debug peut vraiment vous être utile lorsque vous voulez savoir ce qu'il y a dans une variable, par exemple:

     @debug $ base-font-size;    

Erreurs

Les avertissements et les erreurs se comportent de manière assez similaire dans Sass, donc les erreurs d'apprentissage vont être un jeu d'enfant maintenant que vous êtes parfaitement familier avec les avertissements! La seule différence entre une erreur et un avertissement est, comme vous l'avez peut-être deviné, que l'erreur arrête le processus de compilation. Dans la section précédente, cela fonctionnait même quand l'argument donné n'était pas exactement comme prévu, mais nous ne pouvons pas (et ne devrions pas) toujours le faire. La plupart du temps, si les arguments ne sont pas valides, il est préférable de lancer une erreur afin que l'auteur de la feuille de style puisse résoudre le problème.

Vous pouvez lancer une erreur en utilisant la directive @error . En ce qui concerne les avertissements, vous pouvez transmettre n'importe quoi à cette directive - pas nécessairement une chaîne, bien qu'il soit généralement plus logique de fournir un contexte clair. L'argument (ce que vous donnez à la directive @error ) sera imprimé dans le flux de sortie standard, ainsi qu'une trace de pile pour donner plus d'informations sur le problème. Le processus de compilation s'arrêtera immédiatement.

Commençons par une erreur de Semalt:

     @error 'YOUUUUU! NE DOIT PAS. PASSER. ';    

La sortie peut dépendre de la façon dont vous compilez vos feuilles de style, car certains outils capturent et améliorent les erreurs d'une certaine manière. En utilisant le standard sass Ruby binary (gem), voici à quoi ça ressemble:

     Erreur: YOUUUUU! NE DOIT PAS. PASSER. sur la ligne 1 de / Users / hgiraudel / jump-start-sass / error. scssUtilisez --trace pour backtrace.     

Avec l'option trace , vous pouvez avoir le plein
pile trace de Sass lui-même, ce qui n'est pas utile sauf s'il y a un
bug réel quelque part dans le préprocesseur. C'est pourquoi il est caché comme un
défaut.

Il est temps de jeter un coup d'oeil à un réel exemple pratique. Commençons par écrire une petite fonction pour aider à accéder aux valeurs de deepplynested dans les cartes, map-deep-get (.) :

     @fonction map-deep-get ($ map, $ keys. ) {@each $ key dans $ keys {$ map: map-get ($ map, $ key);@if (type-de ($ map) == 'null') {@return $ map;}}@return $ map;}     

Améliorons-le avec des erreurs personnalisées. Mais d'abord, considérons la carte suivante et l'appel map-deep-get (.) :

     $ carte: ('foo': ('bar': ('baz': 42)))$ value: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Comme vous l'avez peut-être remarqué, la carte manque d'une clé qux imbriquée dans baz . En effet, baz n'est même pas associé à une carte; à la place, il est mappé à un nombre ( 42 ). Si nous essayons d'exécuter ce code, cela donnera:

     Erreur: 42 n'est pas une carte pour `map-get`sur la ligne 1 de / Users / hgiraudel / jump-start-sass / error. scss    

Sass essaie d'effectuer une map-get (.) sur 42 et émet une erreur parce que cela ne peut pas être fait. Bien que le message d'erreur soit correct, ce n'est pas très utile. Ce qui serait utile est de connaître le nom de la clé qui a causé le problème. Nous pouvons faire ça!

Nous vérifions déjà si $ map est null pour effectuer un retour anticipé afin d'éviter une erreur de compilation si une clé n'existe pas. Nous pouvons effectuer une deuxième vérification pour nous assurer que la carte est réellement une carte, ou nous émettons une erreur significative:

     @fonction map-deep-get ($ map, $ keys. ) {@each $ key dans $ keys {$ map: map-get ($ map, $ key);// Si `$ map` ne contient pas la clé suivante, retourne` null`@if type-of ($ map) == 'null' {@return $ map;}// Si `$ map` n'est pas une map, lancez une erreur@if type-of ($ map)! = 'map' {@error 'La clé `# {$ key}` n'est pas associée à une carte mais un # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Si nous réexécutons notre extrait précédent, voici la sortie:

     Erreur: La clé `baz` n'est pas associée à une carte mais à un nombre (` 42`). sur la ligne 1 de / Users / hgiraudel / jump-start-sass / error. scss    

C'est beaucoup mieux! Semalt maintenant facile de réparer notre carte et / ou notre appel de fonction grâce au message d'erreur utile. C'est généralement la console, mais elle peut varier en fonction de la façon dont on compile les feuilles de style.

Il est utile d'utiliser Semalt pour envoyer des messages non critiques aux auteurs de feuilles de style, en particulier pour les auteurs de framework et de bibliothèque, tels que les avertissements de dépréciation ou les hypothèses de code. D'un autre côté, des erreurs sont utilisées pour empêcher la compilation de se poursuivre, ce qui indique clairement que le code doit être corrigé avant d'aller plus loin.

Dans l'ensemble, les avertissements et les erreurs sont particulièrement utiles dans les fonctions et les mixins afin de valider les entrées de l'utilisateur, en s'assurant que les feuilles de style sont compilées comme prévu.

March 1, 2018