Quelle directive est utilisée pour détecter les erreurs dans SASS ?

Dans SASS, une directive est un symbole spécial commençant par le caractère "@". Diverses directives sont utilisées dans le code SCSS pour demander au compilateur de traiter le code de manière spécifique.

Dans ce tutoriel, nous apprendrons à utiliser les directives @error et @debug respectivement pour générer des erreurs ou déboguer du code.

@directive d'erreur dans SASS

La directive d'erreur est représentée par '@error', nous pouvons l'utiliser lorsque nous devons générer une erreur. Par exemple, si une certaine condition n’est pas remplie, nous devons générer une erreur.

Grammaire

Les utilisateurs peuvent utiliser la directive « @error » selon la syntaxe suivante pour détecter les erreurs dans SASS.

@error "error message";

Dans la syntaxe ci-dessus, le message d'erreur est remplacé par une erreur réelle, que nous devons afficher dans la sortie.

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, nous avons créé un objet "Color" dans SASS qui contient différentes couleurs et leurs codes hexadécimaux.

De plus, nous avons créé la fonction changeStyle(), qui prend une couleur comme paramètre. Il vérifie si la carte contient la couleur du paramètre transmis comme clé. Si tel est le cas, il renvoie le code hexadécimal de la couleur. Sinon, il renvoie une erreur.

Nous appelons la fonction changeStyle() en passant 'blue' comme paramètre, les utilisateurs peuvent voir l'erreur dans le terminal lors de la compilation de SCSS.

$colors: (
   green: #00ff00,
   white: #ffffff,
);
@function changeStyle($color) {
   @if map-has-key($colors, $color) {
      @return map-get($colors, $style);
   }
   @error "Color is not included in the style: '#{$style}'.";
}
.container {
   style: changeStyle(blue);
}

Sortie

Une fois exécuté, il produira le résultat suivant −

=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
   "status": 1,
   "file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
   "line": 11,
   "column": 60,
   "message": "Undefined variable: "$style".",
   "formatted": "Error: Undefined variable: "$style". on line
   11 of scss/style.scss,
   {$style}'. ";\r -----------------------------------------------^"
}

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, la fonction Divide() prend deux valeurs comme paramètres. Si le deuxième argument est égal à zéro, nous renvoyons une erreur. Sinon, nous renvoyons le résultat de la division du nombre.

// writing an scss code to use @error directive
@function divide($a, $b) {
   @if $b == 0 {
      @error "Division by zero is not allowed.";
   }
   @return $a / $b;
}
.one {
   width: divide(10, 2);
}
.two {
   width: divide(10, 1);
}
.three {
   width: divide(10, 0);
}

Sortie

Dans la sortie, l'utilisateur peut observer les erreurs.

=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
   "status": 1,
   "file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
   "line": 4,
   "column": 12,
   "message": "Division by zero is not allowed.",
   "formatted": "Error: Division by zero is not allowed.  on
   line 4 of scss/style.scss, in file allowed. "; \r ----------------------^"
}

Le rôle de la commande @debug dans SASS

La directive « @debug » est utilisée pour déboguer le code SASS. En déboguant le code, les développeurs peuvent connaître l'emplacement exact de l'erreur dans le code. Par exemple, nous pouvons imprimer la valeur d'une variable en déboguant le code et en détectant les erreurs manuellement.

Grammaire

Les utilisateurs peuvent utiliser la commande SASS "@debug" selon la syntaxe suivante.

@debug $var-name;

Dans la syntaxe ci-dessus, 'var-name' est remplacé par le nom réel de la variable pour imprimer sa valeur pour le code de débogage.

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, nous utilisons la directive @debug pour déboguer le code SASS. Nous avons défini les variables de hauteur et de bordure et stocké leurs valeurs respectives.

Après cela, nous avons utilisé la directive @debug pour imprimer les valeurs des variables de hauteur et de bordure, que l'utilisateur peut observer dans la sortie.

$height: 45rem;
$border: 2px, solid, blue;
div {
   @debug $height;
   @debug $border;
}

Sortie

Une fois exécuté, il produira le résultat suivant −

=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
C:/Data E/web devlopment/nodedemo/scss/style.scss:5 DEBUG: 45rem
C:/Data E/web devlopment/nodedemo/scss/style.scss:6 DEBUG: 2px, solid, blue Rendering Complete, saving .css file...
Wrote CSS to C:\Data E\web devlopmentodedemo\css\style.css

Les utilisateurs apprennent à utiliser les directives @error et @debug pour détecter les erreurs lors de la compilation du code SASS. Nous pouvons générer des erreurs à l'aide de la directive @error et détecter les erreurs en déboguant le code à l'aide de la directive @debug.

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!