Hatena::ブログ(Diary)

眠る前に布団にはいろうか

2011-11-15

SCSSの3つのコメントスタイル

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

基本的には

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

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

//単一行コメント

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

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

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

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

出力スタイルの指定

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

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

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

nested

scss --style nested style.scss style.css

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

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

expanded

scss --style expanded style.scss style.css

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

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

compact

scss --style compact style.scss style.css

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

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

compressed

scss --style compressed style.scss style.css

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

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

こんな感じで使い分けてます

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

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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/nenjiru/20111115/scss_comment_style