Utiliser les directives de Sass @error, @warn et @debug

outils de débogage sass: @error, @warn et @debug Commandes

SASS fournit trois instructions pour aider les développeurs à déboguer le code: @error, @warn et @debug. Ils sont utilisés pour déboguer n'importe quelle valeur à tout moment de la logique de code qui a besoin d'aide et à découvrir le comportement du code.

• @error Directive: Cette directive arrêtera complètement le compilateur SASS et enverra la chaîne de texte à la sortie du compilateur comme une erreur fatale. Il est idéal pour valider les paramètres dans le mixin ou les fonctions et faire savoir aux développeurs ce qu'ils font de mal ou à entrer des valeurs complètement incompatibles.

• @warn Directive: Cette directive est moins nocive que @error. Il envoie des messages au compilateur pour les développeurs à lire, mais permet au compilateur de faire son travail et d'écrire à tous les CS. Il fonctionne pour les notifications de dépréciation ou suggère que les développeurs suivent certaines meilleures pratiques.

• @debug Directive: C'est le moins invasif des trois instructions de rétroaction. Il imprime les valeurs de toutes les expressions SASS (variables, expressions mathématiques, etc.) contenues à la console que les développeurs peuvent voir. Il est parfait pour les efforts de débogage personnel.

Les mécanismes de rétroaction similaires sont très courants dans d'autres langages de programmation, tels que console.log() ou alert() en javascript, var_dump() ou print_r() en php, debug dans Ruby, etc. Ces fonctions vous permettent de déboguer toute valeur et de découvrir le comportement du code à tout moment de la logique qui a besoin d'aide. inspect

Grammaire de base et utilisation

Les trois instructions suivent la même syntaxe:

@directive "要输出的文本字符串";

En fait, ces trois instructions peuvent accepter tout type de valeur, pas nécessairement des chaînes. Cela signifie que vous pouvez avertir, lancer ou déboguer les cartes, les listes, les chiffres, les chaînes - essentiellement tout ce que vous voulez. Cependant, comme nous utilisons souvent ces directives pour fournir un contexte sur le problème, nous passons généralement une chaîne décrivant la situation.

Si vous devez insérer la valeur d'une variable dans une chaîne, vous pouvez utiliser la syntaxe d'interpolation SASS standard

, et la valeur de la variable sera imprimée dans la chaîne: #{$variable}

@error "抱歉，`#{$variable}` 不是 $variable 的有效值。";

Remarque: les backticks (`) autour de l'interpolation ne sont pas nécessaires. Vous voudrez peut-être les inclure car ils fournissent aux développeurs un point de départ / point final évident pour le contenu variable.

Si le développeur fait une erreur lors de l'utilisation de votre code SASS, ces directives enverront le message spécifié au compilateur, qui affichera le message au développeur. Par exemple, une application GUI (telle que Codekit) affichera des notifications système avec des erreurs. Certains packages de notification Grunt et Gulp peuvent également le faire.

Si les développeurs se compilent à l'aide de la ligne de commande (Sass, Compass, Grunt ou Gulp), le message peut apparaître dans leur console (terminal, iterm2, mastic, etc.). Si vous écrivez SASS en ligne à l'aide de Sassmeister ou Codepen, vous n'obtiendrez que des commentaires limités, mais vous pouvez obtenir des notifications en ligne ou du texte dans la fenêtre de sortie de l'éditeur.

@error Instruction: arrêtez de compiler immédiatement

La directive

sass '@error arrête complètement le compilateur SASS et envoie la chaîne de texte à la sortie du compilateur comme une erreur fatale. Utilisez cette directive lorsque vous devez envoyer un message qui arrête immédiatement le développeur et les oblige à corriger immédiatement l'erreur. C'est idéal pour faire savoir aux développeurs ce qu'ils font mal ou à entrer une valeur complètement incompatible. SASS contiendra tous les numéros de ligne d'erreur mortels, y compris la sortie @error. La directive @error est idéale pour vérifier les paramètres dans un mixin ou une fonction.

Remarque: Si votre compilateur est plus tôt que Sass 3.4 ou Libsass 3.1, @error n'est pas disponible. Vous pouvez utiliser cette fonction log() pour simuler @error dans les anciennes versions de SASS.

@warn Instruction: émettez un avertissement, mais n'arrêtez pas de compiler

@warn Les instructions sont beaucoup moins nocives que @error. Il envoie des messages au compilateur pour les développeurs à lire, mais permet au compilateur de faire son travail et d'écrire à tous les CS. @error convient à la correction des erreurs qui cassent complètement les fonctions ou les mixins, tandis que @warn est plus adapté à la dépréciation des notifications, ou recommandant aux développeurs de suivre certaines meilleures pratiques.

Remarque: les développeurs SASS compilés avec le drapeau --quiet ne verront pas la sortie @warn. Si le développeur a absolument besoin de voir les commentaires envoyés par votre SASS, comptez sur @error. @warn est rarement fermé, mais cela est possible.

@debug Commande: débogage de sortie vers la console

Sass '@debug La directive est la moins invasive des trois instructions de rétroaction. Il imprime les valeurs de toutes les expressions SASS (variables, expressions mathématiques, etc.) contenues à la console que les développeurs peuvent voir. Il n'est pas entièrement utile dans les bibliothèques open source ou d'équipe. Au contraire, @debug est parfait pour le débogage personnel. Si vous êtes dans des opérations mathématiques complexes et que vous devez savoir ce qu'une variable contient actuellement, utilisez @debug pour la trouver.

Résumé

La programmation sans rétroaction sera très mauvaise. Heureusement, SASS a plusieurs instructions pour envoyer des commentaires au compilateur pour aider les développeurs à éviter les erreurs, à maintenir les normes et à dépanner la logique avancée. Vous pouvez utiliser @error, @warn et @debug pour vous fournir des commentaires pour vous-même et toute autre personne utilisant votre code.

(La partie FAQ est omise car elle est trop longue et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être réécrite au besoin et intégré dans le texte pour présenter de manière plus naturelle. )

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!