Which directive is used to detect the errors in SASS ?
In order to detect the errors in SASS, one should use @debug Directive. It displays the SassScript expression values. It can be used when anyone wants to see the value of a variable or expression while developing the file.
Let’s see an example so that we get to know more information about the @debug directive in a practical way. Just follow these steps to know the implementation:
- First create a SASS file, for this example, I have named it debug.scss.
- Now define some variables with their value.
CSS
$style: (
color
:
#00FF00
);
$font-sizes:
15px
+
5px
;
.container {
@debug $style;
@debug $font-sizes;
}
- 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 will show the code which you have debugged using the @debug directive:
Example: Let’s see another example to get a clear idea about it. Follow the same steps as above.
CSS
$ width : 350px ; $colors: ( IndianRed: #CD5C5C , Salmon: #FA8072 , LightCoral: #F08080 ); $font-sizes: heading, p, sm; .container{ @debug $width; /* single value */ @debug $colors; /* map */ @debug $font-sizes; /* list */ } |
Output: