SCSSの3つのコメントスタイル - 眠る前に布団にはいろうか

SCSSはコンパイル時に出力スタイルのオプションをつけることで、出力を制御できます。
これはコメントの出力にも影響があるので、違いをまとめてみました。

単一行コメントはすべて取り除かれ、複数行は圧縮指定（--style compressed）しないかぎりは出力されます。

公式にサポートされているコメントスタイル

//単一行コメント

/*
 * 複数行コメント
 */

これに加えて、どのオプションでも削除されないコメント行も指定できます。
ライセンス表記などに向いてるので、ライブラリをインポートする場合に最適だと思います。

/*!
 * エスケープされる複数行コメント
 */

ただしドキュメントには記載がなかったので将来にわたって使用できる方法か分かりません。
（執筆時のSassのバージョンは 3.1.10）

次のSCSSを基本に各オプションで出力した違いを紹介します。

/*!
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
	// 単一行コメント
	color: black;
	
	a {
		color: green;
	}
}

これをそれぞれのオプションで出力してみます。
出力スタイルは --style に nested, expanded, compact, compressed の4つがあります。

scss --style nested style.scss style.css

入れ子構造で出力されます。--styleをつけない場合のデフォルトになります。
単一行コメントは削除され、複数行コメントは残ります。

/*
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
  color: black; }
  body a {
    color: green; }

scss --style expanded style.scss style.css

一般的な記述方式に近いスタイルです。
単一行コメントは削除され、複数行コメントは残ります。

/*
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
  color: black;
}
body a {
  color: green;
}

scss --style compact style.scss style.css

セレクタとプロパティを一行にまとめます。
単一行コメントは削除され、複数行コメントは残りますが一行になります。

/*
 * !を含んだ複数行コメント
 */
/* 複数行のコメント */
body { color: black; }
body a { color: green; }

scss --style compressed style.scss style.css

改行と空白、単一行と複数行のコメントも削除されます。

/*
 * !を含んだ複数行コメント
 */body{color:black}body a{color:green}

/*! ライセンス関係 */
/* ルールセットの見出し、またはデバッグ時の助けになるような情報 */
// 通常のコメント、またはコメントアウト

チームでの開発時は nested や expanded でコメントを共有し、リリース時には compressed でライセンス以外を削除、といった使い方にいいんじゃないででしょうか。