在本章中,我们将研究有关Sass评论。注释是不可执行的语句,放置在源代码中。注释使源代码更易于理解。SASS支持两种类型的注释。
以下示例演示了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://www.web176.com/">web176</a> </body> </html>
接下来,创建文件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文件。
/* 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; }
让我们执行以下步骤,看看上面给出的代码如何工作:
多行注释中的插值将在结果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 web176</h1> <p>This is an example for Interpolation in SASS.</p> </body> </html>
接下来,创建文件style.scss。
$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文件。
/* Framework version for the generated CSS is 7.8. */
让我们执行以下步骤,看看上面给出的代码如何工作。