百科狗注释 - scss 语法
注释
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;
}
|
在 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 编写样式库时，您可以使用注释来记录您的库提供的 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
|
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
