SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】

Sassは、変数・関数・条件分岐・ループなど、CSSをよりプログラマブルに記述できるので便利で柔軟な反面、「なぜこのスタイルが当たっていないのか？」「意図した値が出力されていない」といったトラブルも起こりやすくなります。

そんな時に役に立つのが、Sassが提供しているデバッグ用ディレクティブです。
この記事では、@debug・@warn・@errorの3つを取り上げ、それぞれの役割や使いどころを解説します。

Sassでデバッグが必要な理由

SassはCSSに比べて機能が豊富な分、ロジックのミスや意図しない出力が起きやすいという特徴があります。
例えば下記のような場合には、是非デバッグしてエラーや不具合を分析し改善していきましょう。

1. なぜこの結果が出力されたのか分析したい

   一見正しく見えても、条件式が複雑だったり変数の中身が間違っていたりすると、想定外の値が出力されることがあります。
   なぜこの結果が出力されたのか分析するために、適宜@debugを利用してその時点での状況を確認しましょう。

2. ループの回数や条件分岐が意図通りに動いているか確認したい

   ループの中で何がいつどこで変更されたり生成されているのかを可視化できると安心ですよね。
   @debugを利用して、変数や処理の結果を確認しながら進めていきましょう。

3. 開発者にコーディングルールを守らせたい

   例えば使うべき色や選択肢、命名規則など、設計ルールに反ったコーディングをさせるために、コンパイル時にプロジェクト特有のエラーメッセージを表示させることは非常に有用です。
   特に開発者が複数になる場合や、長期に渡るプロジェクトで自分自身のリマインドを行いたい場合には、@errorや@warnなどのメッセージを表示できるディレクティブを活用しましょう。

@debugで変数や計算式を確認する

@debugは、Sassの処理中に変数や式の中身をコンソールに出力するためのディレクティブです。
JavaScriptのconsole.log();やPHPのvar_dump();に相当する機能で、開発のデバッグをする基本的な機能として非常に使いやすく、Sass初心者にもおすすめです。

@debug 活用シーンについて

@debugは下記のようなシーンで活用できます。

scssでの記述例

$color: #3498db;
@debug $color; // 出力：#3498db

@mixin font-weight( $weight: normal ) {
    @debug $weight; // 出力：normal;
    font-weight: $weight;
}
.box{
    @include font-weight;
}

@for $i from 1 through 3 {
    .item-#{$i} { width: 100px * $i; }
    @debug $i; // 出力：1,2,3
}

@debugと記述するとターミナルにデバッグ結果が表示されます。

出力されるCSS

.box {
  color: #3498db;
  font-weight: normal;
}

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

コンパイル後のCSSにはデバッグ結果は出力されません。
デバッグ結果はターミナルに表示されるので、そちらを確認しましょう。

ターミナル出力結果

DEBUG: #3498db
DEBUG: normal
DEBUG: 1
DEBUG: 2
DEBUG: 3

ターミナルにデバッグ結果が表示されます。
デバッグ結果を踏まえ、CSSがエラーとならないよう適宜修正して対応しましょう。

@warnで注意メッセージを出力する

@warnは、warningの意味で、Sassのビルドを止めずにコンソールに警告メッセージを表示するためのディレクティブです。
@debugと違い、「これは明らかにおかしい・非推奨かもしれない」といった注意喚起を目的として使います。
メッセージがターミナル上に表示されるだけでCSSファイルはコンパイルされてしまうので、CSSのコンパイルを止めたい場合は@errorを利用しましょう。

@warn 活用シーンについて

@warnは下記のようなシーンで活用できます。

scssでの記述例

@mixin check-color($color) {
    @if $color == null {
        @warn "色が指定されていません";
    } @else {
        color: $color;
    }
}
  
.box-1 {
    @include check-color(null);
}
  
.box-2 {
    @include check-color(#3498db);
}

@warnはコンパイルを止めないので、@warnしたエラーメッセージがターミナル上に表示されます。

出力されるCSS

.box-2 {
  color: #3498db;
}

コンパイル自体は成功しており、@warn部分は出力されません。
また、.box-1は@mixinの引数がnullなため、セレクタ内に出力すべきプロパティが定義されておらず、CSS上に展開されていません。

ターミナル出力結果

Warning: 色が指定されていません

@errorでコンパイルを強制停止する

@errorは、Sassのコンパイル処理を明示的に停止させるためのディレクティブです。
何らかの重大な入力ミスやルール違反を検出した場合、そのままビルドを進めずに開発者にエラーを通知したい場面で使います。

@error活用シーンまとめ

@errorは下記のようなシーンで活用できます。

scss記述例

@mixin font-size($size) {
    @if $size == null {
        // 必須項目チェック
        @error "`$size`が設定されていません。値を定義してください。";
    } @else if type-of($size) != number {
        // 値の型チェック
        @error "`size()`には数値を渡してください（#{type-of($size)} は無効）";
      } @else if $size < 0 {
        // 値の内容チェック
        @error "幅は負の値にできません。正の値を指定してください。";
    }
    font-size: $size * 1px;
}

// 条件分岐を利用したルールチェック
@mixin flg_check ( $flg ){
  @if $flg == true {
    color: #fff;
  } @else {
    @error "フラグが正ではありません。";
  }
}

.box {
  @include font-size( null ); // nullを入れて必須項目確認
  @include flg_check( false );
}

ターミナル出力結果

Error: "`$size`が設定されていません。値を定義してください。"

必須項目確認時にコンパイルが中断されるので、その後のチェック処理は動作しません。
ひとつひとつのエラーを解決しながらコンパイルを進めていきましょう。

3つのディレクティブの使い分け

Sassのデバッグに使用する３つのディレクティブは、下記のように使い分けましょう。

最後に

これで、Sassの3つのデバッグ用ディレクティブ（@debug・@warn・@error）についての備忘録でした。
SassはCSSを効率的に記述するために非常に有用な言語ですが、複雑な処理を行うと処理の状況がわからなくなったり、プロジェクト独自のルールが難解になるなどトラブルも起きやすくなります。
@debug・@warn・@errorを適切に使い分け、スマートなコーディングに役立てていきましょう。