Sass のコメント記述

Sass では、コメントの書き方に「 \* *\ 」と「 // 」の2種類の記述方法が用意されています。

参考：Sass Documents

コメントの書き方

SCSS では、一行コメントの「 // 」 と、複数行コメントの「 /* ～ */ 」 の2種類の形式でコメントを記述することができます。

これらの記述方法は、コンパイル時の扱いが次のように異なっています。

• 一行コメント（ // から行末まで）: CSS へのコンパイル時に削除される。
• 複数行コメント（ /* から */ まで）: CSS へのコンパイル後もコメントとして残る。

例えば、次のような SCSS を作成したとします。

/*
 * Name: blueleaf v0.0.1
 * Description: A lightweight responsive Sass/CSS framework.
 * Author: BBB
 * License: MIT
 * 複数行コメントです。CSS へのコンパイル後もコメントとして残ります。
 */

$_color-text: #333;

body {
  color: $_color-text;
}

// 一行コメントです。コンパイル時に削除されます。
.c-btn {
  display: block;
}

上記 SCSS をコンパイルすると、次のように一行コメントを削除した CSS が出力されます。

/*
 * Name: blueleaf v0.0.1
 * Description: A lightweight responsive Sass/CSS framework.
 * Author: BBB
 * License: MIT
 * 複数行コメントです。CSS へのコンパイル後もコメントとして残ります。
 */
body {
  color: #333;
}

.c-btn {
  display: block;
}

複数行コメントの「 /* ～ */ 」は、 CSS へのコンパイル時にコメントとして残るのですが、コンパイルの形式( style )として **compressed** を指定すると複数行コメントも削除されて出力されます。

消したくないコメントには「 ! 」

SCSS のコンパイル形式に compressed を指定すると、複数行コメントも削除されてしまうのですが、残しておきたいコメントもあります。

消えてほしくないコメントの場合、次のように複数行コメントの先頭に「 ! 」を記述します。

/*!
 * Name: blueleaf v0.0.1
 * Description: A lightweight responsive Sass/CSS framework.
 * Author: BBB
 * License: MIT
 * 複数行コメントです。CSS へのコンパイル後もコメントとして残ります。
 */

$_color-text: #333;

body {
  color: $_color-text;
}

.c-btn {
  display: block;
}