Sass教程

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 扩展名.

style.scss

.class1,
.class2{
   color:red;
}

通过使用以下命令 :

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

Sass语法

评论占用整行，并将所有嵌套在其下的文本括起来.它们是基于行的缩进语法.有关评论的更多信息，请参阅此链接.

@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中使用此语法不推荐.如果使用此语法，将显示警告，并在以后的版本中将其删除.一些旧语法如下表所示.

S上.不.	运算符&描述
1	= 在将变量和属性设置为SassScript值时使用它代替:
2	\|\| = 它被用来代替:每当你指定默认值变量.
3	！而不是$，！用作变量前缀.使用它而不是$时，功能不会改变.

S上.不.

运算符&描述

在将变量和属性设置为SassScript值时使用它代替:

|| =

它被用来代替:每当你指定默认值变量.

！

而不是$，！用作变量前缀.使用它而不是$时，功能不会改变.