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

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

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

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

今回の記事では、

  • Sassで使用できる2種類のコメント
  • コンパイル時の挙動について
  • コンパイル形式がcompressedの場合でもコメントを残す方法

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

目次

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

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

  • 1行コメント「//
  • 複数行コメント「/* */

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

1行コメント「//」

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

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

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

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

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

アウトプット形式が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種類のコメントについて解説しました。

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

  • //…コンパイルすると必ず消える。
  • /* */…アウトプット形式がexpanded, nested, compactなら消えない。compressedなら消える。
  • /*! */…どのアウトプット形式でも消えない。

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

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

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる