Lzh on GitHub

注释

Sass 注释的工作方式在 SCSS 和缩进语法之间有很大的不同。两种语法都支持两种类型的注释：使用 / / / 定义的注释（通常）会被编译成 CSS，而使用 // 定义的注释则不会。

Sass 注释的工作方式在 SCSS 和缩进语法之间有很大的不同。两种语法都支持两种类型的注释：使用 / / / 定义的注释（通常）会被编译成 CSS，而使用 // 定义的注释则不会。

在 SCSS 中

SCSS 中的注释与其他语言（如 JavaScript）中的注释类似。单行注释以 // 开头，直到行尾。单行注释中的任何内容都不会作为 CSS 输出；在 Sass 看来，它们可能根本就不存在。它们也被称为静默注释，因为它们不产生任何 CSS。

多行注释以 / / / 开头，并在下一个 / / / 结束。如果多行注释写在允许语句的地方，它就会被编译成 CSS 注释。与静默注释相反，它们也被称为大声注释。一个被编译成 CSS 的多行注释可以包含插值，插值在注释被编译之前会进行求值。

默认情况下，在压缩模式下，多行注释将从编译后的 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 comments.
        sans-serif;
}

在 Sass 中

缩进语法中的注释工作方式略有不同：它们是基于缩进的，就像语法的其余部分一样。与 SCSS 一样，用 // 编写的静默注释永远不会作为 CSS 输出，但与 SCSS 不同的是，// 之后的任何缩进内容也都会被注释掉。

以 / / / 开头的缩进语法注释以相同的方式使用缩进，不同之处在于它们会被编译成 CSS。因为注释的范围是基于缩进的，所以结尾的 / / / 是可选的。与 SCSS 一样，/ / / 注释可以包含插值，并且可以以 /*! 开头以避免在压缩模式下被剥离。

注释也可以在缩进语法中的表达式中使用。在这种情况下，它们的语法与 SCSS 中的完全相同。

// 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

文档注释

在使用 Sass 编写样式库时，你可以使用注释来为你的库提供的混合宏、函数、变量和占位符选择器以及库本身编写文档。这些注释由 SassDoc 工具读取，该工具使用它们来生成漂亮的文档。查看 Susy 网格引擎的文档以了解其工作原理！

文档注释是静默注释，用三个斜杠（///）直接写在你要编写文档的内容上方。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;
}