Contact!

@Debug, @Warn and @Error: debugging in Sass

debugging in sass

Programming blind would be a dark and lonely place for any modern developer. Fortunately, Sass has debugging features to make problems easier to work with. With @debug, @warn and @error we can debug useful information straight to our consoles.

It is worth noting that I use node-sass in my examples, so your mileage may vary.

@debug

Ever wondered how to dump a variable in Sass? @debug has you covered. This handy rule allows you to output variables and expressions directly to your console. It even adds the file and line-number for your convenience.

$colour: #fff;

div {
    background: $colour;

    @debug "The colour is: #{$colour}";
}

In this example we are simply dumping the current value of $colour to the console.

/* Console Output */

path/to/style.scss:6 DEBUG: The colour is: #fff

@warn

@warn allows you a form of validation. It doesn’t stop Sass from running but will throw a warning if the code is run. This is a neat way to remind yourself, or your users, of certain stylistic typos or problems.

$background: #fff;
$colour: #fff;

div {
    background: $background;
    color: $colour;

    @if $background == $colour {
        @warn "Background and text are both #{$colour}!";
    }
}

In this example the background colour and text colour are the same, therefore a warning is shown in the console.

/* Console Output */

WARNING: Background and text are both #fff!
         on line 9 of style.scss

@error

Finally we have the meaty ‘hey, stop everything… you’ve F***ed up!’ rule. If run, @error will print an error message and then stop the compiler dead.

$background: #fff;
$colour: #fff;

div {
    @if $background == $colour {
        @error "Background and text are both #{$colour}!";
    }

    background: $background;
    color: $colour;
}

The example stops the style sheet from being written and throws an error and stack trace which looks something like this:

/* Console Output */

{
    "status": 1,
    "file": "path/to/file",
    "line": 10,
    "column": 10,
    "message": "Background and text are both #fff",
    "formatted": "Error: Background and text are both #fff\n on line 6 of path/to/file... etc"
}

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!