在本章我們學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 |
!
代替$，!用作變數首碼。當它被用來代替$時，功能將不會改變。
|