SASS @error, @warn and @debug At-rule

When we write mixins and functions in SASS/SCSS which can take arguments, chances of argument type mismatch increases and we must handle this in some way. We can use the SASS/SCSS @error, @warn and @debug at-rule for displaying message to the user mentioning that the type of the argument provided is incorrect.

We will be covering the following at-rules in this tutorial:

1. @error at-rule

2. @warn at-rule

3. @debug at-rule

Let's start with @error at-rule.

SASS @error At-rule

SASS/SCSS @error is helpful in both mixins and functions. Suppose we need to ensure that the arguments passed in function or mixins are correct, for this we can use @error at-rul to display an error message in case wrong datatype is provded and stop the compilation of the code.

The syntax for using the @error at-rule is:

@error <expression>

Let's look at an example where we need to pass an argument to decide whether the float property should be left or right.

mixin setcssfloat($floatvalue) {
    @if $floatvalue !=left or $floatvalue !=right {
        @error "Property #{$property} must be either left or right.";
    }
}

$top: top;

@include setcssfloat($top);

The error message displayed will look like this:

Error: "Property top must be either left or right."
?
3 ? @error "Property #{$property} must be either left or right.";
? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
example.scss 3:5 setcssfloat()
example.scss 19:3 root stylesheet

SASS @warn At-rule

SASS @warn at-rule is used to show warning to a user if the user is sending some incorrect values or maybe some value which is no longer accepted by the mixin or a function. The @warn at-rule doesn't stop the compilation of the SASS stylesheet completely.

Syntax for using @warn at-rule is same as that for @error.

Let's take an example to see this in action. Following is the SCSS code with a mixin and @warn at-rule:

$known-prefixes: webkit, moz, ms, o;

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }

    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.tilt {
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms);
}

This will be compiled into the following CSS:

.tilt {
  -wekbit-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}

Along with displaying the following warning message:

Warning: Unknown prefix wekbit.
example.scss 6:7 prefix()
example.scss 16:3 root stylesheet

SASS @debug At-rule

In some cases it's useful 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.

SCSS/SASS @debug at-rule helps us with this problem. The syntax for @debug at-rule is also similar to the @error at-rule.

To understand the usage, its better to have a look at an example. Suppose a mixin adds two numbers and sets it as padding to a div:

@mixin div-padding($x, $y) {
    $z : $x + $y;
    padding: $z * 1px;
    @debug "width is: #{$z}";
}

@include div-padding(100,200);

The debug message will look like this:

test.scss:3 Debug: width is: 300px

In this tutorial we covered @error, @warn and @debug at-rule in SASS/SCSS. You must use them to make your stylesheets more verbose, so that anyone using them can see messages if they are using any mixin or function incorrectly.