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

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

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

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

1 Sassのコメント
- 1.1 複数行コメント（範囲コメント）
- 1.2 1行コメント
2 コメントの種類によるCSS変換（出力）結果
3 アウトプットスタイルによるコメントの出力
4 参考

Sassのコメント

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

複数行コメント（範囲コメント）

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

CSS

/*
 * ここにコメントを記載できます。
 * このコメントは複数行のコメントになります。
 */
body {
  /* ボディの背景を薄い紫色にします。 */
  color: #ede8ff;
}

.content {
  /*
  width: 500px;
  height: 400px;
  */
  width: 600px;
  height: 450px;
}

* ここにコメントを記載できます。

* このコメントは複数行のコメントになります。

body {

/* ボディの背景を薄い紫色にします。 */

color: #ede8ff;

}

.content {

width: 500px;

height: 400px;

width: 600px;

height: 450px;

}

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

Sass

/*
 * ここにコメントを記載できます。
 * このコメントは複数行のコメントになります。
 */
body {
  /* ボディの背景を薄い紫色にします。 */
  color: #ede8ff;
}

.content {
  /*
  width: 500px;
  height: 400px;
  */
  width: 600px;
  height: 450px;
}

* ここにコメントを記載できます。

* このコメントは複数行のコメントになります。

body {

/* ボディの背景を薄い紫色にします。 */

color: #ede8ff;

}

.content {

width: 500px;

height: 400px;

width: 600px;

height: 450px;

}

1行コメント

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

Sass

// ここにコメントを記載できます。
// このコメントは複数行のコメントになります。
body {
  // ボディの背景を薄い紫色にします。
  color: #ede8ff;
}

.content {
  //width: 500px;
  //height: 400px;
  width: 600px;
  height: 450px;
}

// ここにコメントを記載できます。

// このコメントは複数行のコメントになります。

body {

// ボディの背景を薄い紫色にします。

color: #ede8ff;

}

.content {

//width: 500px;

//height: 400px;

width: 600px;

height: 450px;

}

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

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

Sass

/*
 * 複数行のコメントです。
 * この形式のコメントは、CSSにコンパイルされた後も残ります。
 */
body {
  color: #ede8ff;
}

// 1行コメントです。
// この形式のコメントは、CSSにコンパイルされた後に消えます。
.content {
  width: 600px;
  height: 450px;
}

* 複数行のコメントです。

* この形式のコメントは、CSSにコンパイルされた後も残ります。

body {

color: #ede8ff;

}

// 1行コメントです。

// この形式のコメントは、CSSにコンパイルされた後に消えます。

.content {

width: 600px;

height: 450px;

}

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

コンパイル後のCSS

/*
 * 複数行のコメントです。
 * この形式のコメントは、CSSにコンパイルされた後も残ります。
 */
body {
  color: #ede8ff;
}

.content {
  width: 600px;
  height: 450px;
}

* 複数行のコメントです。

* この形式のコメントは、CSSにコンパイルされた後も残ります。

body {

color: #ede8ff;

}

.content {

width: 600px;

height: 450px;

}

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

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

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

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

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

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

Sass

/*
 * 複数行のコメントです。
 * この形式のコメントは、CSSにコンパイルされた後も残ります。
 */
body {
  color: #ede8ff;
}

// 1行コメントです。
// この形式のコメントは、CSSにコンパイルされた後に消えます。
.content {
  width: 600px;
  height: 450px;
}

* 複数行のコメントです。

* この形式のコメントは、CSSにコンパイルされた後も残ります。

body {

color: #ede8ff;

}

// 1行コメントです。

// この形式のコメントは、CSSにコンパイルされた後に消えます。

.content {

width: 600px;

height: 450px;

}

CSS（expanded）

@charset "UTF-8";
/*
 * 複数行のコメントです。
 * この形式のコメントは、CSSにコンパイルされた後も残ります。
 */
body {
  color: #ede8ff;
}

.content {
  width: 600px;
  height: 450px;
}

@charset "UTF-8";

* 複数行のコメントです。

* この形式のコメントは、CSSにコンパイルされた後も残ります。

body {

color: #ede8ff;

}

.content {

width: 600px;

height: 450px;

}

CSS（compressed）

body{color:#ede8ff}.content{width:600px;height:450px}

1	body{color:#ede8ff}.content{width:600px;height:450px}

参考

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

リンク