Sass — Debugging

@debug

$color: #3498db;

.button {
  @debug "Button color: #{$color}";
  background: $color;
}

@warn

@mixin old-syntax($color) {
  @warn "This mixin is deprecated. Use new-button instead.";
  background: $color;
}

.button {
  @include old-syntax(blue);
}

@error

@mixin grid($cols) {
  @if $cols < 1 or $cols > 12 {
    @error "Columns must be between 1 and 12";
  }
  width: math.percentage(1 / $cols);
}

Inspecting output

# See compiled CSS
sass input.scss

# Watch with verbose output
sass --watch input.scss:output.css --style expanded

Common errors

Undefined variable

// Error: Undefined variable
.button {
  background: $primary;
}

// Fix: define the variable
$primary: #3498db;

Invalid nesting

// Error: Properties can only be nested
.button {
  .color { // WRONG - .color is a selector
    blue;
  }
}

// Fix
.button {
  .color {
    color: blue; // Property name needed
  }
}

Circular reference

// Error: circular reference
$a: $b;
$b: $a;

// Fix: use one variable
$a: #3498db;
$b: $a;

Source maps

sass --source-map input.scss output.css

Source maps help debug in browser dev tools:

1. Open browser DevTools
2. Find the .scss file in Sources tab
3. Set breakpoints in Sass code
4. Inspect computed styles

Mini Practice

1. Use @debug to inspect variable values
2. Add @warn for deprecated features
3. Test @error with invalid inputs
4. Generate source maps and inspect in browser

Up Next

Continue with Performance — optimizing Sass for speed.