Sass - 注释

在本章中，我们将学习 Sass 注释。注释是非执行语句，放置在源代码中。注释使源代码更易于理解。Sass 支持两种类型的注释。

• 多行注释 - 使用 /* 和 */ 编写。多行注释会保留在 CSS 输出中。

• 单行注释 - 使用 // 后跟注释编写。单行注释不会保留在 CSS 输出中。

示例

以下示例演示了 SCSS 文件中注释的使用：

/* 这是一个
 * 多行注释
 * 由于它使用 CSS 注释语法，
 * 它将出现在 CSS 输出中。 */
body { color: black; }

// 这些是单行注释
// 它们不会出现在 CSS 输出中，
// 因为它们使用单行注释语法。
a { color: blue; }

您可以使用以下命令告诉 Sass 监视文件并在 Sass 文件更改时更新 CSS：

sass --watch C:\ruby\lib\sass\style.scss:style.css

执行上述命令后，它将自动创建包含以下代码的 style.css 文件：

style.css

/* 这是一个
 * 多行注释
 * 由于它使用 CSS 注释语法，
 * 它将出现在 CSS 输出中。 */
body {
   color: black; }

a {
   color: blue; }

输出

让我们执行以下步骤来查看上述代码如何工作：

• 将上述 HTML 代码保存到 sass_comments.html 文件中。

• 在浏览器中打开此 HTML 文件，将显示如下所示的输出。

Sass 多行注释中的插值

描述

多行注释中的插值会在生成的 CSS 中被解析。您可以在大括号中指定变量或属性名。

语法

$var : "value";
/* 多行注释 #{$var} */

示例

以下示例演示了 SCSS 文件中多行注释插值的使用：

$version: "7.8";
/* 生成的 CSS 的框架版本是 #{$version}。 */

使用以下命令告诉 Sass 监视文件并在 Sass 文件更改时更新 CSS：

sass --watch C:\ruby\lib\sass\style.scss:style.css

执行上述命令后，它将自动创建包含以下代码的 style.css 文件：

style.css

/* 生成的 CSS 的框架版本是 7.8。 */

输出

让我们执行以下步骤来查看上述代码如何工作：

• 将上述 HTML 代码保存到 sass_comments_interpolation.htm 文件中。

• 在浏览器中打开此 HTML 文件，将显示如下所示的输出。