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>Multiline Selectors</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>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扩展名。

样式.scss

.class1,
.class2{
   color:red;
}

您可以使用以下命令告诉 SASS 监视文件并在 SASS 文件发生更改时更新 CSS -

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

接下来，执行上面给出的命令，它将使用以下代码自动创建style.css文件 -

生成的style.css如下所示 -

样式.css

.class1,
.class2 {
   color: red;
}

输出

让我们执行以下步骤来看看上面给出的代码是如何工作的 -

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

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

@进口

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

例如，在 SCSS 中，@import指令可以用作 -

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

这可以在 SASS 中写为 -

@import themes/blackforest
@import fontstyle.sass

混合指令

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

例如，您可以将 mixin 指令编写为 -

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

上面给出的代码与 -

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

已弃用的语法

SASS 支持使用一些旧语法。但是，不建议在 SASS 中使用此语法。如果您使用此语法，则会显示警告，并且在后续版本中将其删除。下表显示了一些旧语法。

S. 编号	运算符及描述
1	= 当将变量和属性设置为 SassScript 的值时，它被用来代替 : 。
2	\|\|= 每当您分配变量的默认值时，都会使用它来代替 : 。
3	！而不是 $, ! 被用作变量前缀。当使用它代替 $ 时，功能不会改变。

S. 编号

运算符及描述

当将变量和属性设置为 SassScript 的值时，它被用来代替 : 。

||=

每当您分配变量的默认值时，都会使用它来代替 : 。

！

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