在本章我们学SASS语法。SASS支持两种语法，即SCSS和缩进语法。
-
SCSS(Sassy CSS)是CSS语法的扩展。这意味着每一个有效的CSS也是一个有效的SCSS语句。 SCSS使得更容易维护大型样式表和可识别特定于供应商的语法和许多CSS。 SCSS文件的扩展为.scss。
-
缩进- 这是旧的语法，有时只称为Sass。使用这种形式的语法CSS可以简洁地写。 SASS文件的扩展名为.sass。
SASS缩进语法
SASS缩进语法或只是SASS替代基于SCSS的CSS语法 。
-
它采用缩进，而不是{和}分隔块。
-
要分割语句，它使用新行，而不是分号(;)。
-
属性声明和选择器必须放在单独占一行，声明的{和}必须放在新行而且要缩进。
例如，请考虑以下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语法完全在SCSS中工作。不过，也有一些差异会在下面的章节中解释：
属性语法
CSS属性可以通过两种方式声明：
-
属性声明与CSS类似，但没有分号(;)。
-
冒号(:) 的前面是每一个属性的名称。
比如，可以写为：
.myclass :color red :font-size 0.2em
以上两种方法(属性声明没有分号，冒号和前缀属性名)可使用默认值。但是，只有一个属性语法允许指定使用 :属性语法 选项.
多行选择器
在缩进语法，选择器可以放在新行的逗号之后。
示例
下面的例子说明使用SCSS文件的多行选择器：
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>多行选择器 - www.xuhuhu.com</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">Welcome to zaixian zaixian</p>
<p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p>
</body>
</html>
下一步创建style.scss. 注意它的扩展名是：.scss
style.scss
.class1,
.class2{
color:red;
}
可以告诉SASS更新CSS，只要通过使用下面的命令SASS文件自动更新文件变化：
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令，它会自动创建style.css文件，如下面的代码：
所产生的style.css文件内容如下：
style.css
.class1,
.class2 {
color: red;
}
让我们来执行以下步骤，看看上面的代码如何工作：
-
保存上述HTML代码到 multiline_selectors.html 文件中。
-
在浏览器中打开该HTML文件，输出如下显示。
注释
注释占用整行，并附嵌套在它们所有的文字并且它们都是基于行的缩进语法。有关注释的详细信息， 请 link.
@import
SASS的@import指令可以写带/不带引号。不像在SCSS必须使用引号。例如，在SCSS的@import指令可以用作：
@import "themes/blackforest"; @import "style.sass";
这可以写成SASS为：
@import themes/blackforest @import fontstyle.sass
混合指令
SASS支持简写形式就像@mixin和@include指令。代替@mixin和@include，可以使用=和+字符需要更少的输入，使代码更简单，更易于阅读。
比如，可以写混入指令为：
=myclass font-size: 14px; p +myclass
相当于下面：
@mixin myclass font-size: 14px; p @include myclass
不推荐使用语法
SASS支持一些旧的语法。但是使用这种语法SASS是不推荐的。如果使用这种语法它将显示警告，这些语法会在以后的版本中删除。一些旧的语法在下表中列出。
| S.N. |
运算符和说明
|
|---|---|
| 1 |
=
它被用来代替：设置变量和属性时SassScript的值。
|
| 2 |
||=
它被用来代替：每当分配一个变量的缺省值。
|
| 3 |
!
代替$，!用作变量前缀。当它被用来代替$时，功能将不会改变。
|