Sass注释
Sass 支持标准的 CSS 多行注释 /* */
,以及单行注释 //
,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会,例如:
// 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 commments.
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;
}
将 !
作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中,通常用于添加版权信息,例如:
/*! 版权信息(压缩输出模式下保留) */
插值语句 (interpolation) 也可写进多行注释中输出变量值:
$version: "1.61.0";
/* This CSS is generated by Runoops version #{$version}. */
编译为 CSS 结果:
/* This CSS is generated by Runoops version 1.61.0. */
文档注释
使用 Sass 编写样式库时,可以使用注释来记录库提供的混合、函数、变量和占位符选择器,以及库本身。
文档注释是静默注释,在所记录内容正上方用三个斜杠 (///) 编写。SassDoc 将注释中的文本解析为Markdown,并支持许多有用的注释来详细描述它。
/// 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;
}
分享笔记