SCSS の2種類のコメント形式

CSS のコメントは /* と */ で囲む1種類のコメント形式しかありませんが、SCSS では、一行コメント (//) と、複数行コメント (/* ～ */) の2種類のコメントを使用することができます。

SCSS でのみ使用可能な一行コメントは、CSS に変換される際に削除されます。

• 一行コメント（// から行末まで）: CSS への変換時に削除される。
• 複数行コメント（/* から */ まで）: CSS への変換後もコメントとして残る。

入力 (SCSS)

/*
 * このコメントスタイルでは、
 * 複数行をコメントアウトすることができます。
 * CSS への変換後もコメントとして残ります。
 */
body { color: black; }

// これらの一行コメントは、
// CSS へ変換する際に削除されます。
strong { color red; }

出力 (CSS)

/*
 * このコメントスタイルでは、
 * 複数行をコメントアウトすることができます。
 * CSS への変換後もコメントとして残ります。
 */
body {
  color: black;
}

strong {
  color: red;
}

TODO コメントなど、開発時にのみ参照したいコメントは一行コメントで記述しておくとよいでしょう。

CSS への変換時に複数行コメントを削除する

SCSS ファイル内に記述した一行コメント (//) は CSS への変換時に自動的に削除されますが、複数行スタイルのコメント (/* ～ */) はデフォルトではそのまま残されます。 ただし、CSS への変換時に、compressed スタイルを指定すると、複数行スタイルのコメントも削除されて出力されます。

$ scss --style compressed input.scss

Copyright 表示のような、消えては困るコメントに関しては、下記のように複数行コメントの先頭に ! を記述します。

/*!
 * Copyright 2018 Maku
 */
body {
  color: #333;
}

コメント内での変数の参照（インターポレーション）

SCSS のコメント記述内で変数 ($var) の値を参照するには、#{$var} という形式で参照します。 この参照の仕方をインターポレーション (interpolation) と呼びます。

$author: "Maku";
/* This CSS is created by #{$author} */