SASS - Debugging

This tutorial covers debugging sass styles.

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

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

This will be usefull during development and outputs during compilation stage. @debug and @warn statements will not be generated in output css.

@debug directive

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

@debug <expression>

expression is a valid sassscript 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

Sometimes if you want to check data types or values in function or anywhere, and wants to throw fata 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 helps developer 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

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

@warn <expression>

example

@warn "this feature is deprected and not used in future";
Prev Next