Sass のコメントをCSSファイルに残す方法、出力しない方法

Sassを使ってコメントを記述する場合、 行コメント「//」とブロックコメント「/* */」の２通りの記述方法があります。

コメントの記述方法によって、コメントをCSSに残すこともできますし、 逆に残さないこともできます。

ここでは、両方の方法とさらに「.min.cssファイル」にコメントを残す方法も紹介します。

CSSにコメントを残す方法

CSSファイルにコメントを残したい場合は、ブロックコメント「/* */」を利用します。

次のように記述します。

/*  h2 設定 */
h2 {
  font-size: 1.3rem;
}

これでCSSにもコメントが記述されます。

CSSにコメントを出力しない方法

CSSファイルにコメントを出力しない場合は、 行コメント「//」を利用します。

//  h2 設定
h2 {
  font-size: 1.3rem;
}

この場合はCSSにコメントは残りません。

これを知らずに「あれ？コメントが消えてる、困った!」と思った方は、 行コメント「//」をブロックコメント「/* */」に変更してください。

「.min.cssファイル」にコメントを残す方法

上で紹介したいずれの方法も、圧縮された「.min.cssファイル」にはコメントが残りません。

「.min.cssファイル」にコメントを残す場合は、 ブロックコメント「/* */」に「!」を加えて、「/*! */」と記述します。

/*!  h2 設定 */
h2 {
  font-size: 1.3rem;
}

これで「.min.cssファイル」にもコメントが記述されます。 （３番目の手法は、ほぼ使わないと思いますが、一応）