Sass - 评论

在本章中，我们将学习 Sass Comments。注释是不可执行的语句，位于源代码中。注释使源代码更容易理解。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 = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

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

样式.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文件 -

样式.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。

样式.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文件

样式.css

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

输出

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

  • 将上面给出的 html 代码保存在 sass_comments_interpolation.htm文件中。

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

萨斯评论