Sass - 注释

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

多行注释 - 使用 /* 和 */ 书写。多行注释保留在 CSS 输出中。
单行注释 - 使用//后跟注释来书写。单行注释不会保留在 CSS 输出中。

示例

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

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "https://tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

接下来，创建文件style.scss。

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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

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

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

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

输出

让我们执行以下步骤来查看上面给出的代码是如何工作的：

将上面给出的 html 代码保存在sass_comments.html文件中。
在浏览器中打开此 HTML 文件，将显示如下所示的输出。

要学习多行注释中的插值，请点击此链接。

Sass – 多行注释中的插值

描述

多行注释中的插值在生成的 CSS 中得到解析。您可以在花括号内指定变量或属性名称。

语法

$var : "value";
/* multiline comments #{$var} */

示例

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

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

接下来，创建文件style.scss。

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

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

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

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

style.css

/* Framework version for the generated CSS is 7.8. */

输出

让我们执行以下步骤来查看上面给出的代码是如何工作的：

将上面给出的 html 代码保存在sass_comments_interpolation.htm文件中。
在浏览器中打开此 HTML 文件，将显示如下所示的输出。

打印页面