SASS debug Directive

Sass @debug Directive

Sass @debug directive is used to detect the errors and display the SassScript expressions values to the standard error output stream.

Let’s create a SCSS file named “debug.scss”, having the following data.

 $font-sizes: 10px + 20px; $style: (   color: #bdc3c7 ); .container{   @debug $style;   @debug $font-sizes; }  

Now, open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.

Execute the following code: sass –watch debug.scss:debug.css

It will create a normal CSS file named “debug.css” in the same directory automatically.

debug-directive1

Output:

debug-directive2