@debug

スタイルシートの開発中に変数や式の値を確認すると便利な場合があります。そのため@debugルールが用意されています。@debug <expression>のように記述され、その式の値、ファイル名、行番号を出力します。

Playground

SCSS構文

@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});
}
Playground

Sass構文

@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})

デバッグメッセージの正確なフォーマットは実装によって異なります。Dart Sassでの表示形式は次のとおりです。

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

💡 豆知識

文字列だけでなく、任意の値を@debugに渡すことができます。meta.inspect()関数の値と同じ表現が出力されます。