1. What is SASS @debug Rule?
While writing style rules in big projects and lengthy stylesheets, we may forget the value of an expression or variable. In this case, the @debug rule helps to discover the value of SASS script variables or expressions. In this tutorial, we will explore the @debug directive and its syntax. Also, we will get to learn about the usage of the @debug directive and some other benefits of using it in the SASS program.
1.1. Syntax of @debug Directive
The syntax of the @debug rule or directive is quite simple to implement in our SASS project. The below box displays the basic syntax of this directive.
@debug some-expression
2. Usage of @debug Rule in SASS
The @debug directive works really simple and is very useful while writing SCSS code. We have to just put the variable or expression after this keyword. Resultantly, the value of variable or expression prints out on the console with the line number. Check the following example to understand its usage.
Example
$color: #f8f9fa;
$font: 'noto sans', sans-serif;
.content-wrapper{
display: block;
background: $color;
font-family: $font;
padding: 30px;
@debug "The colour is: #{$color}";
@debug "The font-family is: #{$font}";
}
Output
file-path/file-name.scss:1 DEBUG: The colour is: #f8f9fa file-path/file-name.scss:2 DEBUG: The colour is: #'noto sans', sans-serif
2.1. Explanation
In this example, we used the @debug rule along with a string in our SASS program. This string is quoted and prints on the console along with the variable value. Further, we used the interpolation after the string to get the variable value into the string.
3. Conclusion
SASS @debug is very useful and sometimes helps us to dump or explore the value of any variable. While scripting a SCSS program, we make use of this rule to find the expression or variable value. Moreover, it adds the file name and line number also. Which acts as a reference to that particular expression or variable. Hence, this SASS directive proves its usefulness in the SCSS language.