Sass @debug Directive

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

Sass @debug Directive Example

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.

Output:

Next TopicSass @warn Directive

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India