コメント
Sassのコメントの動作方法は、SCSSとインデント構文で大きく異なります。どちらの構文も2種類のコメントをサポートしています。/* */ を使用して定義された（通常は）CSSにコンパイルされるコメントと、// を使用して定義され コンパイルされないコメントです。
SCSSの場合SCSSの場合 パーマリンク
SCSSのコメントは、JavaScriptなどの他の言語のコメントと同様に機能します。**単一行コメント**は // で始まり、行末まで続きます。単一行コメントの内容はCSSとして出力されません。Sassにとっては、存在しないのと同じです。CSSを生成しないため、**サイレントコメント**とも呼ばれます。
**複数行コメント**は /* で始まり、次の */ で終わります。複数行コメントがステートメントが許可されている場所に記述されている場合、CSSコメントにコンパイルされます。サイレントコメントとは対照的に、**ラウドコメント**とも呼ばれます。CSSにコンパイルされる複数行コメントには、式展開を含めることができます。式展開はコメントがコンパイルされる 前に評価されます。
デフォルトでは、複数行コメントは圧縮モードでコンパイルされたCSSから削除されます。ただし、コメントが /*! で始まる場合は、常にCSS出力に 含まれます。
プレイグラウンドSCSS 構文
// This comment won't be included in the CSS.
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = #{1 + 1} */
/*! This comment will be included even in compressed mode. */
p /* Multi-line comments can be written anywhere
* whitespace is allowed. */ .sans {
font: Helvetica, // So can single-line comments.
sans-serif;
}
CSS 出力
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
font: Helvetica, sans-serif;
}
Sassの場合Sassの場合 パーマリンク
インデント構文のコメントは、少し動作が異なります。構文の他の部分と同様に、インデントベースです。SCSSと同様に、// で記述されたサイレントコメントはCSSとして出力されませんが、SCSSとは異なり、開始 // の下にインデントされたすべてがコメントアウト されます。
/* で始まるインデント構文のコメントは、CSSにコンパイルされることを除いて、インデントと同じように機能します。コメントの範囲はインデントに基づいているため、終了 */ は省略可能です。また、SCSSと同様に、/* コメントには式展開を含めることができ、圧縮モードで削除されないように /*! で始めることができます。
インデント構文では、式内でコメントを使用することもできます。この場合、SCSSとまったく同じ構文になります。
プレイグラウンドSass 構文
// This comment won't be included in the CSS.
This is also commented out.
/* But this comment will, except in compressed mode.
/* It can also contain interpolation:
1 + 1 = #{1 + 1}
/*! This comment will be included even in compressed mode.
p .sans
font: Helvetica, /* Inline comments must be closed. */ sans-serif
CSS 出力
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
font: Helvetica, sans-serif;
}
ドキュメントコメントドキュメントコメント パーマリンク
Sassを使用してスタイルライブラリを作成する場合、コメントを使用して、ライブラリが提供するMixin、関数、変数、プレースホルダーセレクタ、およびライブラリ自体をドキュメント化できます。これらのコメントはSassDocツールによって読み取られ、美しいドキュメントを生成するために使用されます。Susyグリッドエンジンのドキュメントで、実際に動作している様子を ご覧ください。
ドキュメントコメントは、ドキュメント化しているもののすぐ上に3つのスラッシュ（///）を使用して記述されたサイレントコメントです。SassDocはコメント内のテキストをMarkdownとして解析し、それを詳細に記述するための多くの便利なアノテーションを サポートしています。
プレイグラウンドSCSS 構文
/// Computes an exponent.
///
/// @param {number} $base
/// The number to multiply by itself.
/// @param {integer (unitless)} $exponent
/// The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
Sass 構文
/// Computes an exponent.
///
/// @param {number} $base
/// The number to multiply by itself.
/// @param {integer (unitless)} $exponent
/// The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent)
$result: 1
@for $_ from 1 through $exponent
$result: $result * $base
@return $result