Sass - Directives de débogage

La description

La directive @debug détecte les erreurs et affiche les valeurs de l'expression SassScript dans le flux de sortie d'erreur standard.

Exemple

Ci-dessous, le fichier de feuille de style enregistré avec l'extension .scss, qui est similaire au fichier css.

debug.scss

$font-sizes: 10px + 20px;
$style: (
   color: #bdc3c7
);

.container {
   @debug $style;
   @debug $font-sizes;
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

sass --watch C:\ruby\lib\sass\debug.scss:debug.css

Lorsque vous exécutez la commande ci-dessus, elle crée automatiquement le fichier debug.css . Chaque fois que vous modifiez le fichier SCSS , le fichier debug.css sera mis à jour automatiquement.

Production

Exécutons les étapes suivantes pour voir comment le code ci-dessus fonctionne et vous donne une erreur de débogage -

  • Enregistrez le code ci-dessus dans debug.scss fichier.

  • Exécutez la ligne de commande mentionnée ci-dessus dans l'invite de commande.