Sassメモ: SCSS ファイルでのコメントの書き方

2018-12-17

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 への変換時に、--style compressed オプションを指定すると、複数行スタイルのコメントも削除されて出力されます。

$ scss --style compressed input.scss

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

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

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

// 変数の定義
$author: "Maku";

// コメント内での変数の参照
/* This CSS is created by #{$author} */

参考: SCSS で変数を使用する

2018-12-17