{

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 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 emit a warning
  • @error: this print to 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 DOM tree and print to the user for debugging purpose.

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.