Sometimes during writing sass code, you need to print the value of variables or expressions. SASS provides three directives to debug the styles. All this results in the output to standard streams.

  • @debug rule
  • @warn rule
  • @error rule

This will be useful during development and outputs during the compilation stage. @debug and @warn statements will not be generated in output CSS.

@debug directive sass

It prints the value of the expression, filename, and line number to the standard output stream ie default console.

@debug <expression>

expression is a valid sass script expression or variable or a string for example

$min-width:900px;
@debug 20px + 5px;
@debug "minimum width:#{$min-width}";
Output is
filename.scss:1 Debug: divider offset: 25px
filename.scss:2 Debug: divider offset: 900px

@error rule in sass

Sometimes if you want to check data types or values in a function or anywhere, and want to throw a fatal error if any unexpected values this will be used in mixins and functions, and notify the user when argument types or data checks are not valid. This will help developers to enforce validations for reusable styles.

@error <expression>

example:

@mixin checkWidth($width) {
  @if type-of($width) != number {
    @error "Property #{$width} accepts numbers only.";
  }
  width:$width;
}

div{
  @include checkWidth(900px);
}
.container{
    @include checkWidth("asdfads");
}

CSS output is

div {
  width: 900px;
}
.container {
  @error "Property asdfads accepts numbers only.";
  width: "asdfads";
}

@warn rule

This rule is used to tell the user about warning messages to the standard default stream ie console. It will be useful when styles are deprecated or some warning messages.

@warn <expression>

example

@warn "this feature is deprecated and not used in future";