Sass Debugging

Well I guess it runs on JavaScript so why not?

Gav McKenzie
Gav McKenzie
Sep 12, 2018

You’ve probably used some JavaScript debugging like console.log or even the old classic alert() if you’ve been around long enough.

If you’ve ever had to delve into PHP, you probably used var_dump(), print_r(), or even die().

Well it turns out Sass has some debugging power too!

There’s 3 main directives, @error, @warn and @debug.

@error: "Variable: #{$foo} is invalid or missing.";
@warn: "Color: #{$bar} is pretty awful, why not try #f66";
@debug: "Current value of baz is: #{$baz}";

The @error directive will cause a fatal Sass error and is probably best used for validating parameters in your mixins or functions.

The @warn directive will throw a warning that can be silenced by running sass with --quiet.

Finally, @debug is just for throwing out some debugging information to your console. Maybe check the value of a variable at runtime or something similar.

More reading at Sitepoint.