Sass 是一种强大的 CSS 扩展语言,它提供了一系列的注释类型,可以帮助我们更好地理解代码。
Sass 注释分为两种:单行注释和多行注释。单行注释以“//”开头,只能用于单行;多行注释以“
此外,Sass 还支持特殊的嵌套注释。它允许我们在嵌套的代码中使用特定的标记来标记整个代码块。这样就可以避免将整个代码块都作为注释考虑。
// 这是一个特殊的嵌套注释 .parent { color: red; // 子元素颜色 .child { color: yellow; // 黄色不会生效 } }
在本章中,我们来研究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="//www..cn/">TutorialsPoint</a> </body> </html>
接下来,创建文件 style.scss 。
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:rubylibsassstyle.scss:style.css
接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:
body { color: black; } a { color: blue; }
让我们执行以下步骤,看看上面的代码如何工作:
将上述html代码保存在 sass_comments.html 文件中。
在浏览器中打开此HTML文件,将显示如下输出。
要研究多行注释中的插值,请单击此链接。
描述 @import(reference)用于导入外部文件,但不会将导入的样式添加到编译的CSS文件中。 这是在版本1.5.0 中发布的。例子以下示...
描述svg-gradient是一种颜色到另一种颜色的转换。 它可以向同一元素添加许多颜色。 它包括至少三个参数:第一个参数标识渐变类型...
CSS链接HTML锚点链接可以使用CSS属性为其文本颜色,背景,字体等设置样式。以下代码将颜色样式添加到锚链接。a {color:red;}链接...
我们可以使用CSS伪类结合选择器来基于状态对元素进行样式化。例如:hover 将应用一个样式当用户将鼠标悬停在选择器指定的元素上时...
图片的居中显示 css 有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性text-align:center...