Which directive is used to detect the errors in SASS?

In SASS, the directive is a special symbol that starts with the ‘@’ character. There are various kinds of directives that are used in the SCSS code, instructing the compiler to process the code in a particular way.

In this tutorial, we will learn about the @error and @debug directives used to throw an error or debug the code, respectively.

@error directive in SASS

The error directive is represented like ‘@error’, and we can use it whenever we require to throw an error. For example, if some condition doesn’t meet, we require to throw an error.

Syntax

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

@error "error message";

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

Example

In the example below, we have created the ‘colors’ object in the SASS, which contains the different colors and their hexcode.

Also, we have created the changeStyle() function, which takes the color as an argument. It checks whether the map contains the color passed in the argument as a key. If yes, it returns the hexcode of color. Otherwise, it returns an error.

We have invoked the changeStyle() function by passing the ‘blue’ as an argument, and users can see the error in the terminal while compiling the 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

On execution, it will produce the following output −

=> changed: C:\Data E\web devlopment
odedemo\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
 -----------------------------------------------^
"
}

Example

In the example below, the divide() function takes two values as a parameter. If the second argument is equal to zero, we throw an error. Otherwise, we return the division 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, users can observe the error.

=> changed: C:\Data E\web devlopment
odedemo\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
 ----------------------^
"
}

@debug directive in SASS

The ‘@debug’ directive is used for debugging the SASS code. By debugging the code, developers can know where is the exact error in the code. For example, we can print values of the variables by debugging code and can catch the errors manually.

Syntax

Users can follow the syntax below to use the ‘@debug’ directive of the SASS.

@debug $var-name;

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

Example

In the example below, we have used the @debug directive to debug the code of the SASS. We have defined the height and border variables and stored the respective values.

After that, we have used the @debug directive to print the values of the height and border variable, which users can observe in the output.

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

Output

On execution, it will produce the following output −

=> changed: C:\Data E\web devlopment
odedemo\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 devlopment
odedemo\css\style.css

Users learned to use the @error and @debug directives to catch an error while compiling the SASS code. We can throw an error using the @error directive and catch the error using the @debug directive by debugging the code.