Sass - 注释

Sass - 注释

Sass 支持两种类型的注释，与许多编程语言类似，但在编译后的 CSS 输出方面有特定的行为。

1. 多行注释 (/* ... */) - “响亮”注释

这些是标准的 CSS 注释。默认情况下，当使用 expanded 输出样式时，Sass 会在编译后的 CSS 输出中保留这些注释。

SCSS 示例：

/*
 * 这是一个标准的 CSS 注释。
 * 它将出现在编译后的 CSS 文件中（在 expanded 模式下）。
 */
body {
  color: black;
}

.widget {
  /* 一个单行 CSS 注释，也会被保留 */
  border: 1px solid #ccc;
}

编译后的 CSS (expanded 样式)：

/*
 * 这是一个标准的 CSS 注释。
 * 它将出现在编译后的 CSS 文件中（在 expanded 模式下）。
 */
body {
  color: black;
}

.widget {
  /* 一个单行 CSS 注释，也会被保留 */
  border: 1px solid #ccc;
}

重要提示： 在生产环境中使用 compressed 输出样式时，这些注释通常会被移除以最小化文件大小。

在 Compressed 模式下保留注释： 如果你需要某个特定的 /* ... */ 注释（例如许可信息头部）在 compressed 输出中也被保留，可以在 /* 后紧跟着一个感叹号 !，即以 /*! 开头。

/*!
 * 重要许可信息
 * 此注释将在 compressed 输出中保留。
 */

2. 单行注释 (// ...) - “静默”注释

这些注释以 // 开头，并持续到行尾。Sass 在编译期间会完全移除这些注释。无论输出样式是 expanded 还是 compressed，它们都不会出现在最终的 CSS 输出中。

它们非常有用，可以在 Sass 文件中添加笔记、解释或临时禁用代码，而这些内容不会暴露给浏览器。

SCSS 示例：

$primary-color: blue; // 定义主品牌颜色

// TODO: 稍后重构此部分
a {
  color: $primary-color;
  // text-decoration: none; // 临时注释掉
}

编译后的 CSS (任意样式)：

a {
  color: blue;
}

建议

• 对 Sass 文件中的大多数注释需求（解释代码、留下笔记、TODOs），使用单行注释 (//)。它们能让你的开发环境保持信息丰富，同时不会增加最终 CSS 的文件大小。
• 多行注释 (/* ... */) 仅在你特别需要注释出现在 expanded CSS 输出中时（例如开发过程中的章节分隔线），或者你需要使用 /*! ... */ 在 compressed 输出中保留注释时（例如许可信息）使用。

注释中的插值

你可以在多行注释 (/* ... */) 中使用 Sass 插值 #{...} 来包含变量或表达式的值。这通常只在 expanded CSS 输出中用于调试或生成文档时有用。

$version: '1.2.0';

/*!
 * 我的库 v#{$version}
 */