## 一、概述 sass和scss其實是一樣的css預處理語言，SCSS 是 Sass 3 引入新的語法，其后綴名是分別為 .sass和.scss兩種。 SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。 ## 二、核心 `sass`讓人們受益的一個重要特性就是它為`css`引入了變量； 你可以把反復使用的`css`屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一 次的屬性值，你可以賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途。 `sass`使用`$`符號來標識變量； ### 1、變量申明 ```css $nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } //編譯后 nav { width: 100px; color: #F90; } ``` ### 2、嵌套CSS 規則 `css`中重復寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要 一遍又一遍地寫同一個`ID` ~~~css #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } ~~~ 像這種情況，`sass`可以讓你只寫一遍，且使樣式可讀性更高。在Sass中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。`sass`在輸出`css`時會幫你把這些嵌套規則處理好，避免你的重復書寫。 ~~~css #content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } } ~~~ ~~~css /* 編譯后 */ #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } ~~~ ### 3、導入SASS文件; `css`有一個特別不常用的特性，即`@import`規則，它允許在一個`css`文件中導入其他`css`文件。然而，后果是只有執行到`@import`時，瀏覽器才會去下載其他`css`文件，這導致頁面加載起來特別慢。 `sass`也有一個`@import`規則，但不同的是，`sass`的`@import`規則在生成`css`文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個`css`文件中，而無需發起額外的下載請求。