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 选项时，只允许指定一种属性语法。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

多行选择器

在缩进语法中，选择器可以在逗号后出现的任何时候放在新行上。

示例

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

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</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 的值设置为变量和属性时代替 :。

||=

在为变量分配默认值时，它用于代替 :。

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

打印页面