注释

Sass 注释的工作方式在 SCSS 和缩进语法之间有很大的不同。两种语法都支持两种类型的注释：使用 /**/ 定义的注释，会被编译到 CSS 中，而使用 // 的注释，不会被编译进 css 文件中。

在SCSS中

SCSS中的注释与 JavaScript 等其他语言中的注释类似。 单行注释 ，以开头 // ，一直到行尾。 单行注释中的任何内容都不会编译进 CSS ；就 Sass 而言，这类注释被视为不存在。它们也被称为 静默注释 ，因为它们不产生任何 CSS。

多行注释 ，以 /* 开头， */ 结尾。如果多行注释写在允许声明的地方，它会被编译为CSS注释。与静默注释相比，它们也被称为 标准注释 。编译为CSS的多行注释可能包含插值，将在编译注释之前对其进行计算。

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

scss	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; }	/* 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; }

scss

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;
}

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

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

以缩进开头的缩进语法中，注释 /* 以相同的方式工作，只是它们被编译为CSS。因为注释的扩展是基于缩进的，所以关闭 */ 是可选的。也像 SCSS 一样， /* 注释可以包含插值，并且可以 /*! 开始，避免在压缩模式下被剥离。

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

sass	css
// 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	/* 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

css

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

/* 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 编写样式库时，您可以使用注释来记录您的库提供的 mixins、函数、变量和占位符选择器，以及库本身。这些是由 SassDoc 工具读取的注释，它使用它们来生成漂亮的文档。

文档注释是 静默注释 ，在您正在记录的内容正上方用三个斜线（ /// ）书写。SassDoc 将注释中的文本解析为 Markdown，并支持许多有用的注释来详细描述它。

scss	cass
/// 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; }	/// 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

scss

cass

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

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

返回SCSS导航

注释

在SCSS中

在 Sass 中

文档注释