Sass - 语法

原创

admin 4个月前 (08-09) 阅读数 15 #CSS

Sass - 语法

在本章中，我们将学习Sass语法。Sass支持两种语法，分别是SCSS和缩进语法。

SCSS (Sassy CSS)是CSS语法的扩展。这意味着所有有效的CSS也是有效的SCSS。SCSS使得维护大型样式表更加容易，并且可以识别特定的供应商语法。许多CSS和SCSS文件使用.scss扩展名。
缩进语法 - 这是较旧的语法，有时简称为Sass。使用这种语法，CSS可以更简洁地编写。Sass文件使用.sass扩展名。

Sass缩进语法

Sass缩进语法或简称为Sass是基于CSS的SCSS语法的替代方案。

它使用缩进而不是{和}来分隔代码块。
它使用换行符而不是分号(;)来分隔语句。
属性声明和选择器必须放在单独的行上，而{和}内的语句必须放在新行并缩进。

例如，考虑以下SCSS代码：

.myclass {
   color = red;
   font-size = 0.2em;
}

缩进语法是一种较旧的语法，不建议在新的Sass文件中使用。如果您使用此文件，它将在CSS文件中显示错误，因为我们使用了=而不是冒号来设置属性和变量。

使用以下命令编译上述代码：

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

接下来，运行上述命令；它将在style.css文件中显示错误，如下所示：

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Sass语法差异

大多数CSS和SCSS语法在Sass中都能完美工作。然而，存在一些差异，在以下部分中解释：

属性语法

CSS属性可以以两种方式声明：

属性可以类似于CSS声明，但不需要分号(;)。
每个属性名前会加上冒号(:)。

例如，您可以这样写：

.myclass
   :color red
   :font-size 0.2em

默认情况下，可以使用上述两种方式（不带分号的属性声明和属性名前加冒号）。但是，当您使用:property_syntax选项时，只允许指定一种属性语法。

多行选择器

在缩进语法中，选择器可以在逗号后出现在新行上。

示例

以下示例描述了SCSS文件中多行选择器的使用：

<html>
   <head>
      <title>多行选择器</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>使用多行选择器的示例</h2>
      <p class = "class1">欢迎来到教程点！！！</p>
      <p class = "class2">Sass代表语法上很棒的样式表...</p>
   </body>
</html>

接下来，创建文件style.scss。注意.scss扩展名。

style.scss

.class1,
.class2{
   color:red;
}

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

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

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

生成的style.css如下所示：

style.css

.class1,
.class2 {
   color: red;
}

输出

让我们执行以下步骤来查看上述代码如何工作：

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

注释

注释占据整行，并包含其下的所有嵌套文本。在缩进语法中，注释是基于行的。有关注释的更多信息，请参阅此链接。

@import

在Sass中，@import指令可以带/不带引号编写。与SCSS不同，它们必须使用引号。

例如，在SCSS中，@import指令可以这样使用：

@import "themes/blackforest";
@import "style.sass";

这可以在Sass中写成：

@import themes/blackforest
@import fontstyle.sass

Mixin指令

Sass支持@mixin和@include等指令的简写形式。您可以使用=和+字符代替@mixin和@include，这需要更少的输入，使您的代码更简单、更易读。

例如，您可以这样编写mixin指令：

=myclass
   font-size: 12px;
p
   +myclass

上述代码等同于：

@mixin myclass
   font-size: 12px;
p
   @include myclass

已弃用的语法

Sass支持使用一些旧语法。然而，在Sass中使用这种语法不推荐。如果您使用此语法，将显示警告，并在后续版本中移除。一些旧语法如下表所示。

序号	运算符 & 描述
1	= 用于在设置变量和属性为SassScript值时代替冒号。
2	\|\|= 用于在为变量分配默认值时代替冒号。
3	! 代替$用作变量前缀。当使用$代替!时，功能不会改变。

序号

运算符 & 描述

用于在设置变量和属性为SassScript值时代替冒号。

||=

用于在为变量分配默认值时代替冒号。

代替$用作变量前缀。当使用$代替!时，功能不会改变。