Sassの書き方（デバッグ）

コンパイルした値を確認する @debug

Sassではコンパイルする経過の中で、変数や計算結果などを出力して値を確認するために@debugが用意されています。
以下のように変数の値や計算結果をコマンドラインに出力することができます。

style.scss

// 変数の定義
$number1: 1.6rem;
$number2: 10.5%;
$number3: -329.4px;

// 値を出力
@debug $number1;
@debug $number2;
@debug $number3;

// 値の型を出力
@debug type-of($number1);
@debug type-of($number2);
@debug type-of($number3);

ここでSassをコンパイルすると、コマンドライン（ターミナル）上で以下のように値を出力して内容を確認することができます。

出力結果の例

[18:13:18] Starting 'sass'...
/style.scss:6 DEBUG: 1.6rem
/style.scss:7 DEBUG: 10.5%
/style.scss:8 DEBUG: -329.4px
/style.scss:10 DEBUG: number
/style.scss:11 DEBUG: number
/style.scss:12 DEBUG: number
[18:13:18] Finished 'sass' after 5.64 ms

以下のように関数の実行結果の値なども確認することができます。

style.scss

// 変数の定義
$number1: 1.6rem;

// 関数を実行
@debug abs($number1);
@debug round($number1);
@debug floor($number1);
@debug ceil($number1);

出力結果の例

[18:13:18] Starting 'sass'...
/style.scss:5 DEBUG: 1.6rem
/style.scss:6 DEBUG: 2rem
/style.scss:7 DEBUG: 1rem
/style.scss:8 DEBUG: 2rem
[18:13:18] Finished 'sass' after 5.64 ms

メッセージと一緒に値を出力する

@debugに任意のメッセージと変数の値をセットで出力したいときは、変数に補完（Interpolation）を使います。

style.scss

// 変数の定義
$number1: 1.6rem;

// 任意のメッセージと変数の値を出力
@debug "$number1の値：#{$number1}";

出力結果の例

[18:13:18] Starting 'sass'...
/style.scss:5 DEBUG: $number1の値：1.6rem

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。