Sassの@debug・@warn・@errorを使ってみる

Sassの実装を行う上で便利な@debugと@warn、@errorについてそれぞれ試してみます。

サンプルコード

テスト用の関数を作成して、その中で@debug・@warn・@errorをそれぞれ使ってみます。

@function testFunc($number) {
  @debug $number;
  @debug unitless($number);

  @if unitless($number) {
    @warn "単位なし";
  }
  @else {
    @error "単位あり";
  }
  @return $number;
}

引数の値が単位なしの場合は@warn、単位ありの場合は@errorを使用するようにしています。
単位なしの状態で設定して、@debugと@warnを試してみます。

.test {
  width: testFunc(100);
}

コンパイルを実行すると、ターミナルに以下のように出力されました。

src/css/style.scss:2 Debug: 100
src/css/style.scss:3 Debug: true
Warning: 単位なし

@debugは開発中に変数や式などの値を確認することができ、1〜2行目のような出力になります。
@warnはmixinや関数作成時に推奨しない引数を渡した時など、何らかの警告を出したい際に使用します。
出力するメッセージは独自で設定できます。

次に単位ありで@errorを試してみます。

.test {
  width: testFunc(100px);
}

コンパイルの実行途中でエラーになり、ターミナルに以下のように出力されました。

Error: "単位あり"
15 width: testFunc(100px);

@warnは@errorと近いですが、@warnはコンパイルが止まらないで警告を出すのに対して、@errorはコンパイルを途中で止めてエラーを出すようになります。
@errorは関数に意図しない引数を渡された時など、コンパイルを中断させたい場合に設定しておくとよさそうです。