Difference between @warn and @debug
@warn: @warn is an at-rule that is used to show a warning to users if the user is sending some incorrect values or maybe some value that is out of date
Example: Execute the below code with the SASS preprocessor. It prints the warning message saying that the outline will be deprecated in the upcoming version.
Warning: The `outline( )` mixin will be deprecated in version 4.1.0. input.scss 2:2 outline() input.scss 7:1 root stylesheet
@debug: @debug is an At-rule which is used to check the value of variables while writing SCSS code to debug the code you are writing and to see how it will behave with different input values.
Example: Execute the below code with the SASS preprocessor. It prints the values of all the variables.
input.scss:5 Debug: #100111 input.scss:6 Debug: sm, p, bq input.scss:7 Debug: 42px
Differences between @warn and @debug:
Sass’s @debug directive is the least intrusive of all feedback directives.
The @warn directive is considerably less strict than @error.
It prints the value of the SASS expression to the console for the developer.
It sends its message to the compiler for the developer to read, but it allows the compiler to finish its job and write all the CSS.
@warn is better suited for deprecation notices or suggesting a developer follow certain best practices.
It’s not entirely useful in open-source or team libraries. Rather, @debug is for personal use only.
If you are in a complex bit of math and need to know what your variables contain, then you should not use @warn
If you’re in a complex bit of math and need to know what one of your variables contains at the moment, use @debug to find out.
Please Login to comment...