What is the use @error and @debug directives in SASS ?

In this article, we will see the use of @error and @debug directives in SASS. Sass is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. so that we can reuse the code in multiple elements.

The @error directive

Sass consists of three directives that are used for providing feedback to developers. One of them is the @error directive. It is used when you want to display errors. It completely stops the Sass compiler and displays the SassScript expression values as fatal errors. We can use this directive to send a message to developers so that they can stop and correct their mistakes immediately. It helps developers know their mistakes in code as Sass also provides the line number where the error occurs along with @error output.

Example: Given below is the stylesheet file named Error.scss saved with extension .scss, which is similar to the CSS file.

$color:  green;
  @error "Invalid color: '#{$color}'.";  

The following command will start watching for changes in the SASS file and automatically generate the respective CSS file.

sass --watch Error.scss:Error.css

Output:

The @debug directive

The @debug directive displays the SassScript expression values. It prints the value of the expression, filename along with the line number. This directive can be used when the developer wants to see the value of a variable or expression while developing the stylesheet. Hence @debug prints the value of whatever Sass expression it contains (variable, math, etc.) to the console for the developer. It is ideal for personal debugging work.

Example: Given below is the stylesheet file named debug.scss saved with extension .scss, which is similar to the CSS file.

$color-green: #00FF00;
$font-sizes: 25px + 20px;;

.container {
  @debug $color-green;
  @debug $font-sizes;
  @debug "GeeksforGeeks";
}

The following command will start watching for changes in the SASS file and automatically generate the respective CSS file.

sass --watch debug.scss:debug.css

Output: