Sass：语法

在本章中，我们将研究SASS语法。SASS支持两种语法，即SCSS和缩进语法。

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

SASS缩进语法

SASS缩进语法或仅SASS是基于CSS的SCSS语法的替代方法。

它使用缩进而不是{and}来分隔块。
为了分隔语句，它使用换行符代替分号(;)。
属性声明和选择器必须放在自己的行上，{and}中的语句必须放在新行上并缩进。

例如，考虑以下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扩展名。

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文件，显示如下所示的输出。

Comments

注释占据了整行，并包含嵌套在其下的所有文本。它们是基于行的缩进语法。

@ import

在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中使用此语法。如果使用此语法，将显示警告，并且在更高版本中将其删除。下表显示了一些旧语法。

序号	运算符和说明
1个	= 将变量和属性设置为SassScript的值时，使用它代替了：。
2	\|\| = 每当您要分配变量的默认值时，就用它代替：。
3	! 代替$，!用作变量前缀。使用$代替$时，功能不会改变。

作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1738.html