Sassで使える2種類のコメントについて【コンパイル時の挙動も解説】

CSSでは、/*と*/で文字を囲うことでコメントを記述することができますね。

/* ここにコメントを記入 */
.sample {
  color: red;
}

Sassではコメントの記述方法が2種類用意されており、コンパイル形式によって挙動が異なります。

今回の記事では、

これらの項目について解説していきますので、Sassをお使いの方はぜひ参考にしてみてください。

Sassで使用できる2種類のコメントの記述方法

Sassでは、2種類のコメントを使用することができます。

それぞれの特徴を見ていきましょう。

1行コメント「//」

Sassでは、JavaScriptやその他のプログラミング言語でも使用されている1行コメント//で記述することができます。

// ヘッダー
.header {
  background-color: red; // 背景色を赤にする
}

1行コメントはコンパイル（CSSに変換）すると削除される

1行コメントは、CSSに変換（コンパイル）すると削除されます。

Sassは4種類のアウトプット形式がありますが、その中でもよく使われるexpandedとcompressedを使用した場合を見てみましょう。

アウトプット形式がexpandedのとき

.header {
  background-color: red;
}

アウトプット形式がcompressedのとき

.header{background-color:red;}

どちらの形式でも、CSSに変換されるとコメントが消えていますね。

そもそもCSSでは//でコメントアウトできません。

1行コメントはSassファイル内でしか使用できないということを覚えておきましょう。

複数行コメント「/* */」

続いてはCSSでも使用されている複数行コメント/* */の紹介です。

/* ヘッダー */
.header {
  background-color: red; /* 背景色を赤にする */
}

こちらの記法では複数行のコメントにも対応しています。

/* 1行コメントの例 */

/* ====================
  複数行コメントの例
==================== */

複数行コメントはアウトプット形式がcompressed以外だと保持される

Sassの4つのアウトプット形式のうちexpanded, nested, compactではコメントが保持されます。

アウトプット形式がexpandedのとき

/* ヘッダー */
.header {
  background-color: red;
  /* 背景色を赤にする */
}

アウトプット形式がnestedのとき

/* ヘッダー */
.header {
  background-color: red;
  /* 背景色を赤にする */ }

アウトプット形式がcompactのとき

/* ヘッダー */
.header { background-color: red; /* 背景色を赤にする */ }

上記3つの形式では、コメントがそのまま残っていますね。

アウトプット形式がcompressedの場合は、以下のようにコメントが消えてしまいます。

アウトプット形式がcompressedのとき

.header{background-color:red}

スペースや改行とともにコメントも削除されていますね。

しかしcompressedでもコメントを残す方法はあるので、次で紹介していきます。

コンパイル形式がcompressedの場合でもコメントを残すには

compressedでもコメントを残すには、/*! */のように!をつけます。

/*! ヘッダー */
.header {
  background-color: red; /*! 背景色を赤にする */
}

このコードをコンパイルすると、以下のような結果になります。

/*! ヘッダー */.header{background-color:red;/*! 背景色を赤にする */}

compressedでもコメントが保持されているのが確認できましたね。

Sassの公式ページでも紹介されていますので、コメントを残したい場合はこの方法で対応するといいでしょう。

【まとめ】Sassで使える2種類のコメントとコンパイル後に保持する方法

Sassで使用できる2種類のコメントについて解説しました。

まとめると、以下の通りです。

Sassファイルにのみコメントを残したい場合は//を、コンパイル後のCSSにもコメントを残したい場合は/* */か/*! */を使用しましょう。

Sassのアウトプット形式については別の記事で説明していますので、そちらも合わせてご覧ください。

あわせて読みたい

Sassで使用できる4つのアウトプット形式の特徴や使い方を解説 Sassとは、CSSを効率的に記述できるように設計・開発された言語です。 入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキ…