Sass・SCSSで使えるコメントアウト、「/* */」と「//」のコンパイル時の違い

Sass(SCSS)でコメントアウトしたい時、CSSと同じく/* */で挟んだ部分をコメントできるのはもちろん、他のプログラム言語のように//でもコメントアウトできますよね。

この２種類のコメントスタイルは、ただ複数行に使用できるかどうかの違いだけではなく、コンパイル時に違いが見られることに気づきましたので、メモしておきます。

違いは「CSSにコンパイルした後に残るか、消えるか」

では何が違うかというと

• /* */でコメントアウトしたコメントは、コンパイル後のCSSファイルにも残る
• //でコメントアウトしたコメントは、コンパイル後のCSSファイルでは削除されている。

という点。

コンパイル前のscssファイルの記述

@charset "UTF-8";
/* ヘッダーに関するスタイル */
header{
  a{
    color: #000;
  }
}
// フッターに関するスタイル
footer{
  a{
    color: #fff;
  }
}

これをコンパイルすると...？

コンパイル後のcssファイル

@charset "UTF-8";
/* ヘッダーに関するスタイル */
header a{color:#000}
footer a{color:#fff}

と、なります。

/* ヘッダーに関するスタイル */というコメントの方だけ、コンパイル後にも残っています。

追記：コンパイル形式を圧縮形式にすると、「/* */」のコメントも残らない

コンパイル形式を圧縮形式のcompressedにすると、/* */でのコメントも削除されるようです。

どちらを使えば良いか

ファイルサイズをできるだけ少なく抑えたい場合は、できるだけ//でコメントアウトした方がいいでしょう。

CSSファイルを他の人が編集する可能性がある場合のみ、適度に/*　*/でコメントを残しておいてあげてもいいかもしれません。

追記：圧縮形式の「compressed」でもコメントを残す方法

!をつけて以下のように記述したコメントは、圧縮形式でも削除されないようです。

/*!
  ここのコメントは圧縮形式でも削除されません。
  ライセンスの記述などに使用できます。
*/

ただし、このコメントスタイルは公式ドキュメントでは説明がされていない記法なので、使えなくなる日がくるかもしれません。