在本章中,我们将研究有关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://www.web176.com/">web176</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文件中。
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 web176</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文件中。
作者:terry,如若转载,请注明出处:https://www.web176.com/sass/1731.html
支付宝
微信