Which directive is used to detect errors in SASS?

In SASS, a directive is a special symbol that starts with the "@" character. Various directives are used in SCSS code to instruct the compiler to process the code in specific ways.

In this tutorial, we will learn to use the @error and @debug directives to throw errors or debug code respectively.

@error directive in SASS

The error instruction is represented as '@error', we can use it when we need to throw an error. For example, if a certain condition is not met, we need to throw an error.

grammar

Users can use the ‘@error’ directive according to the following syntax to detect errors in SASS.

@error "error message";

In the above syntax, the error message is replaced by a real error, which we need to display in the output.

The Chinese translation of

Example

is:

Example

In the example below, we create a "color" object in SASS that contains different colors and their hex codes.

In addition, we created the changeStyle() function, which takes color as a parameter. It checks if the map contains the passed parameter color as key. If so, it returns the hex code of the color. Otherwise, it returns an error.

We call the changeStyle() function by passing 'blue' as a parameter, and users can see errors in the terminal when compiling 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);
}

Output

When executed, it will produce the following output −

=> 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 -----------------------------------------------^"
}

The Chinese translation of

Example

is:

Example

In the example below, the divide() function takes two values ​​as parameters. If the second argument is equal to zero, we throw an error. Otherwise, we return the division result of the number.

// 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);
}

Output

In the output, the user can observe the errors.

=> 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 ----------------------^"
}

@The role of debug command in SASS

The ‘@debug’ directive is used to debug SASS code. By debugging the code, developers can know the exact location of the error in the code. For example, we can print the value of a variable by debugging the code and catch errors manually.

grammar

Users can use the SASS "@debug" directive according to the following syntax.

@debug $var-name;

In the above syntax, 'var-name' is replaced by the actual variable name to print its value for debugging code.

The Chinese translation of

Example

is:

Example

In the following example, we use the @debug directive to debug SASS code. We defined height and border variables and stored their respective values.

After that, we used the @debug directive to print the values ​​of the height and border variables, which the user can observe in the output.

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

Output

When executed, it will produce the following output −

=> 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

Users learn to use the @error and @debug directives to catch errors when compiling SASS code. We can throw errors using @error directive and catch errors by debugging code using @debug directive.

The above is the detailed content of Which directive is used to detect errors in SASS?. For more information, please follow other related articles on the PHP Chinese website!