Sassで使えるコメントとコンパイル結果

Sass ロゴ

CSSでは/*で始まり、*/で終わる部分がコメントとして扱われます。

CSSのメタ言語(CSSプリプロセッサ)であるSassもCSSと同様に、コメントを記述することができます。

今回は、Sassで使えるコメントを紹介します。
また、アウトプットスタイルによるコメントのコンパイル結果(出力結果)についても合わせて紹介します。

Sassのコメント

Sassのコメントには、CSSと同じ複数行コメント(範囲コメント)と、1行コメントの2種類があります。

複数行コメント(範囲コメント)

CSSでは、/**/で囲まれた範囲がコメントと認識されます。

CSS

CSSで利用できる形式の複数行コメントは、当然Sassでも使用することができます。

Sass

1行コメント

Sassでは、JavaScriptやC言語などで使用できる形式の1行コメントを使用できます。
//で始まる行はコメントと認識されます。

Sass

コメントの種類によるCSS変換(出力)結果

Sassでは複数行コメントと1行コメントが使用できますが、コメントの形式によってCSSにコンパイル(変換)された時に出力されるコメントと、出力されないコメントがあります。

Sass

/**/形式のコメントはCSSでも使用できるので、コンパイル後も残ります。
//形式のコメントはCSSでは使用できないので、コンパイル後に消えます。

コンパイル後のCSS

アウトプットスタイルによるコメントの出力

CSSでも使用できる/**/形式のコメントは、通常はSassをCSSにコンパイルした後も残りますが、アウトプットスタイルが「compressed」の場合は、/**/形式のコメントがCSSに変換される時に削除されます。

アウトプットスタイルが「compressed」の場合は、サイズの軽量化が最優先されます。
従って、インデントや改行と一緒にコメントも削除されます。

ブラウザー上でSassをCSSに変換できるWebサービスの「SassMeister」では、CSSの出力形式がメニューで選択できるようになっていますので試してみてください。

「SassMeister」については、以下の記事でご紹介しています。

ブラウザー上でSassをCSSに変換できるWebサービス SassMeister
Sassを使うと変数の使用やコードの再利用、条件分岐などのプログラム的な制御構文の利用をすることができます。 Sassを利用するこ...

以下に変換する前のSassのコードと、「SassMeister」で変換した後のCSSのコード例を記載しておきます。

Sass

CSS(expanded)

CSS(compressed)

参考

本記事の執筆には、以下の書籍を参考にさせていただきました。
「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」は、Sassを学習するのであれば、是非手元に置いておきたい1冊になります。