Handling Errors with @error and @warn

Sass offers directives, @error and @warn, that provide feedback to the compiler and help you avoid mistakes.

Sass

// Media queries
@mixin mq($break) {  
  $value: map-get($breakpoints, $break);
  $sm: map-get($breakpoints, 'sm');            
  
  @if $value == null {
    @error "`#{$break}` is not a valid breakpoint name.";          
  }          
            
  @else if $value < $sm {
    @media (max-width: $value) {
      @content;       
    }          
  }    
  @else {
    @media (min-width: $value) {
      @content;       
    }             
  }  
}

The @error directive is useful for validating arguments to mixins and functions. It notifies developers when they’ve entered invalid data.

Use @warn to inform developers to deprecations in code, or to suggest following certain practices in a project.

Sourcemaps

Sass creates a sourcemap to help you see the original Sass/SCSS source while debugging in the browser. Sourcemaps contain information that links each line of your output CSS to the Sass/SCSS source, right down to the partial file and line of code.

To debug your styles using sourcemaps, you should firstr enable them in your browser.
DevTools > More > Customize and Control > Sources > Enable CSS source maps.

Now, you can debug your styles and find where in the Sass files they are located.