Sass wizards, take note! This is pretty cool.

Sass includes some directives specifically for debugging code. For example, say you write a @mixin that accepts two parameters (example is an altered version from the docs). You expect numbers, but later when it's used, someone passes the string "Cool" instead. The mixin might error, or at least not have the output you were intending.

@mixin nudge($x, $y) {
  position: relative; 
  left: $x; 
  top: $y;
}

// Uhmmmm, no.
.thing {
  @include nudge("Cool");
}

You could set up the mixin such that it will warn you of this problem:

@mixin nudge($x, $y) {

  @if unitless($x) {
    @warn "You may have forgotten a unit for the X value. Expects pixels. Value was: #{$x}.";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "You may have forgotten a unit for the Y value. Expects pixels. Value was: #{$y}.";
    $y: 1px * $y;
  }

  position: relative; 
  left: $x; 
  top: $y;
}

Here's some example usage/results:

Almost the same thing

When you run Sass yourself, @debug and @warn are slightly different. @warn messages can be turned off and output a stylesheet trace.

CodePen doesn't really do any of that. Basically @debug outputs a gray line in the console output and @warn outputs a yellow line.

Other Use Cases

Actual debugging is probably the biggest use case. We've seen people do some pretty wild stuff with Sass, and we can imagine that's frustrating when it's hard to inspect the values of variables and such at any given point. We hope this becomes an easier way to debug and reduced frustration.

@error outputs inine

The way @error works (and it's similarity to other kinds of code errors), it made more sense for us to output the error as an inline message. @error causes a fatal error and doesn't actually finish compiling the code. You'll see it throw messages like this: