本節我們來學習 Sass 的語法，Sass 支援兩種語法，分別為 SCSS （Sassy CSS）和縮排語法（Indented Sass）。
縮排語法
縮排語法是 Sass 的原始語法，檔案的副檔名為
。sass
，所以有時候簡稱為 ”Sass“。縮排語法支援與 SCSS 相同的所有特性，但是它使用縮排而不是花括號
{}
來表示選擇器的巢狀，使用換行而不是分號來分隔屬性。
下面我們來看一下縮排的語法格式。
示例：
建立一個
style。sass
檔案，內容如下所示
。xkd font-size： 14px color： #ccc 。box width： 100px height： 100px border： 1px solid #000 border-radius： 5px
可以看到，在這段程式碼中，使用縮排來代替了花括號，每行樣式屬性之間不需要使用分號分隔。因為沒有花括號可能有些人覺得這樣的語法更加簡潔和易讀，但是我個人還是比較喜歡使用花括號和分號。
SCSS
SCSS （Sassy CSS）格式是在 CSS3 語法的基礎上進行擴充套件，每個 CSS 樣式表是一個同等的 SCSS 檔案。SCSS 檔案的副檔名為
。scss
。
下面我們來看一下 SCSS 的程式碼格式。
示例：
建立一個
style。scss
檔案，檔案內容如下所示：
。xkd { font-size： 12px； color： #ccc； 。box { width： 100px； height： 100px； border： 1px solid #000； border-radius： 5px； }}
縮排語法和SCSS的轉換
上面講到的兩種語法格式，互相之間可以直接透過
@import
指令匯入到另外一種格式中使用。並且透過
sass-convert
命令列工具轉換成另一種格式。
將縮排語法轉為 SCSS：
sass-convert style。sass style。scss
將 SCSS 轉為 縮排語法：
sass-convert style。scss style。sass
示例：
例如現在有一個
test。scss
檔案，檔案中的內容如下所示：
。div{ h3{ color： #fefefe； } a{ color： #000； text-decoration： none； &：hover{ color： #fefefe； } }}
如果我們需要將這個檔案中的內容轉換為縮排語法，可以執行下面這個命令：
sass-convert test。scss test。sass
轉換後的縮排語法：
。div h3 color： #fefefe a color： #000 text-decoration： none &：hover color： #fefefe
連結：https：//www。9xkd。com/
