How to print and debug console and output in Sass with examples

How to print and debug console and output in Sass with examples

This tutorial shows How to debug sass code.

Sometimes, We want to know the value of a variable during CSS compile generation. It is possible with sass inbuilt commands.

How to print sass value to output and console

Let’s see multiple ways to print the sass variable data to the console and output.

  • Use sass Inbuilt rules and directives

Sass provides the following rules

  • @debug: This function is called when debug message is emitted to the console.
  • @warn: This called during sass emits a warning
  • @error: this print to the console during a fatal error is emitted

Syntax

@debug message @warn message @error message;

The message is a string or a CSS expression using variables. It prints the message to the standard output stream.

$primary-font-color: #f90;
@debug "primary font color" + $primary-font-color;
@warn 'primary font color'+$primary-font-color;
@error 'primary font color'+$primary-font-color;

It prints a message to the console during the compilation phase of sass.

Line 1 DEBUG: #f90
Line 1 WARN: #f90
Line 1 ERROR: #f90
  • print to HTML body

This prints the output to html element in HTML body

#header::before {
  content: "#{$primary-font-color}";
}

Here used variable using expression syntax to wrap inside content value. It prints a color string to #header element in the DOM tree and prints it to the user for debugging purposes.

Conclusion

Learned multiple ways to print sass data to console and output with examples.