注释

Sass 中注释的工作方式在 SCSS 和缩进语法之间有很大不同。两种语法都支持两种类型的注释:使用 /* */ 定义的注释(通常)会被编译为 CSS,以及使用 // 定义的不会被编译的注释。

SCSSSCSS permalink

SCSS 中的注释与 JavaScript 等其他语言中的注释类似。单行注释// 开头,直到行尾。单行注释中的任何内容都不会作为 CSS 发出;就 Sass 而言,它们可能根本不存在。它们也被称为静默注释,因为它们不会产生任何 CSS

多行注释/* 开头,在下一个 */ 处结束。如果多行注释写在允许语句的地方,它将被编译为 CSS 注释。与静默注释相比,它们也被称为响亮注释。可以在编译为 CSS 的多行注释中包含插值,这些插值将在注释编译之前被求值。

默认情况下,多行注释将在压缩模式下从编译的 CSS 中删除。但是,如果注释以 /*! 开头,则它将始终包含在 CSS 输出中。

Playground

SCSS Syntax

// 这个注释不会被包含在 CSS 中。

/* 但这个注释会被包含,压缩模式除外。 */

/* 它还可以包含插值:
* 1 + 1 = #{1 + 1} */

/*! 即使在压缩模式下,这个注释也会被包含。 */

p /* 多行注释可以写在允许空白的任何地方 */ .sans {
  font: Helvetica, // 单行注释也可以。
        sans-serif;
}

CSS Output

@charset "UTF-8";
/* 但这个注释会被包含,压缩模式除外。 */
/* 它还可以包含插值:
* 1 + 1 = 2 */
/*! 即使在压缩模式下,这个注释也会被包含。 */
p .sans {
  font: Helvetica, sans-serif;
}





在 Sass 中在 Sass 中 permalink

缩进语法中的注释工作方式略有不同:它们是基于缩进的,就像语法的其他部分一样。与 SCSS 类似,使用 // 编写的静默注释永远不会作为 CSS 发出,但与 SCSS 不同的是,在开头 // 下方缩进的所有内容也会被注释掉。

/* 开头的缩进语法注释在缩进方面的工作方式相同,只是它们会被编译为 CSS。因为注释的范围是基于缩进的,所以结束的 */ 是可选的。与 SCSS 类似,/* 注释可以包含插值,并且可以以 /*! 开头以避免在压缩模式下被删除。

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

Playground

Sass Syntax

// 这个注释不会被包含在 CSS 中。
  这也被注释掉了。

/* 但这个注释会被包含,压缩模式除外。

/* 它还可以包含插值:
  1 + 1 = #{1 + 1}

/*! 即使在压缩模式下,这个注释也会被包含。

p .sans
  font: Helvetica, /* 内联注释必须关闭。 */ sans-serif

CSS Output

@charset "UTF-8";
/* 但这个注释会被包含,压缩模式除外。 */
/* 它还可以包含插值:
 * 1 + 1 = 2 */
/*! 即使在压缩模式下,这个注释也会被包含。 */
p .sans {
  font: Helvetica, sans-serif;
}




文档注释文档注释 permalink

在使用 Sass 编写样式库时,你可以使用注释来记录库提供的混入函数变量占位符选择器,以及库本身。这些注释由 SassDoc 工具读取,它使用这些注释生成漂亮的文档。查看 Susy 网格引擎的文档以了解其实际效果!

文档注释是静默注释,使用三个斜杠(///)直接写在你要记录的内容上方。SassDoc 将注释中的文本解析为 Markdown,并支持许多有用的注解来详细描述。

Playground

SCSS Syntax

/// 计算指数。
///
/// @param {number} $base
///   要与自身相乘的数字。
/// @param {integer (unitless)} $exponent
///   要相乘的 `$base` 的数量。
/// @return {number} `$base` 的 `$exponent` 次方。
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
Playground

Sass Syntax

/// 计算指数。
///
/// @param {number} $base
///   要与自身相乘的数字。
/// @param {integer (unitless)} $exponent
///   要相乘的 `$base` 的数量。
/// @return {number} `$base` 的 `$exponent` 次方。
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result