Difference between @warn and @debug

In this article, you will understand the difference between @warn and @debug. The @warn and @debug directives are used to provide feedback to developers. They are similar to console.log in JavaScript and print() in python.

@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

Syntax:

@warn "string";

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.

CSS

@mixin outline($outline) {
    @warn "The `outline( )` mixin will be deprecated in version 4.1.0.";
    outline : $outline;
}

Output:

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.

@debug variable;

Example: Execute the below code with the SASS preprocessor. It prints the values of all the variables.

CSS

$color: #100111;
$font-sizes: sm, p, bq;
.div {
    @debug $color; // single value
    @debug $font-sizes; // list
    @debug 40px + 2; // math expression
}

Output:

input.scss:5 Debug: #100111
input.scss:6 Debug: sm, p, bq
input.scss:7 Debug: 42px

Differences between @warn and @debug:

@warn	@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.