@debug

Manchmal ist es nützlich, den Wert einer Variable oder eines Ausdrucks während der Entwicklung Ihres Stylesheets anzuzeigen. Dafür ist die Regel @debug da: Sie wird als @debug <Ausdruck> geschrieben und gibt den Wert dieses Ausdrucks zusammen mit dem Dateinamen und der Zeilennummer aus.

Spielplatz

SCSS-Syntax

@mixin inset-divider-offset($offset, $padding) {
  $divider-offset: (2 * $padding) + $offset;
  @debug "divider offset: #{$divider-offset}";

  margin-left: $divider-offset;
  width: calc(100% - #{$divider-offset});
}
Spielplatz

Sass-Syntax

@mixin inset-divider-offset($offset, $padding)
  $divider-offset: (2 * $padding) + $offset
  @debug "divider offset: #{$divider-offset}"

  margin-left: $divider-offset
  width: calc(100% - #{$divider-offset})

Das genaue Format der Debug-Nachricht variiert von Implementierung zu Implementierung. So sieht es in Dart Sass aus:

test.scss:3 Debug: divider offset: 132px

💡 Lustige Tatsache

Sie können jeden Wert an @debug übergeben, nicht nur einen String! Es gibt die gleiche Darstellung dieses Werts aus wie die meta.inspect() Funktion.