編程教程3. 導入SASS文件
css有一個特別不常用的特性，即@import規則，它允許在一個css文件中導入其他css文件。然而，后果是只有執行到@import時，瀏覽器才會去下載其他css文件，這導致頁面加載起來特別慢。sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味著所有相關的樣式被歸……
3-2. 默認變量值
一般情況下，你反復聲明一個變量，只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明:$link-color: blue;$link-color: red;a {color: $link-color;}在上邊的例子中，超鏈接的color會被設置為red。這可能并不是你想要的結果，假如你寫了一個可被他人通過@import導入的sass庫文件……
3-1. 使用SASS部分文件
當通過@import把sass樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的sass文件，并不需要生成對應的獨立css文件，這樣的sass文件稱為局部文件。對此，sass有一個特殊的約定來命名這些文件。此約定即，sass局部文件的文件名以下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個……
3-4. 原生的CSS導入
由于sass兼容原生的css，所以它也支持原生的CSS@import。盡管通常在sass中使用@import時，sass會嘗試找到對應的sass文件并導入進來，但在下列三種情況下會生成原生的CSS@import，盡管這會造成瀏覽器解析css時的額外下載:被導入文件的名字以.css結尾；被導入文件的名字是一個URL地址(比如http:/……
3-3. 嵌套導入
跟原生的css不同，sass允許@import命令寫在css規則內。這種導入方式下，生成對應的css文件時，局部文件會被直接插入到css規則內導入它的地方。舉例說明，有一個名為_blue-theme.scss的局部文件，內容如下:aside { background: blue; color: white;}然后把它導入到一個CSS規……
4. 靜默注釋
css中注釋的作用包括幫助你組織樣式、以后你看自己的代碼時明白為什么這樣寫，以及簡單的樣式說明。但是，你并不希望每個瀏覽網站源碼的人都能看到所有注釋。sass另外提供了一種不同于css標準注釋格式/* ... */的注釋語法，即靜默注釋，其內容不會出現在生成的css文件中。靜默注釋的語法跟JavaScriptJava等類C的語言中單行……
5. 混合器
如果你的整個網站中有幾處小小的樣式類似(例如一致的顏色和字體)，那么使用變量來統一處理這種情況是非常不錯的選擇。但是當你的樣式變得越來越復雜，你需要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。混合器使用@mixin標識符定義。看上去很像其他的CSS @標識符，比如說@med……
5-1. 何時使用混合器
利用混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發現自己在不停地重復一段樣式，那就應該把這段樣式構造成優良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否為這個混合器想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣……
5-2. 混合器中的CSS規則
混合器中不僅可以包含屬性，也可以包含css規則，包含選擇器和選擇器中的屬性，如下代碼:@mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; }}當一個包含css規則的混合器通……
5-3. 給混合器傳參
混合器并不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定制混合器生成的精確樣式。當@include混合器時，參數其實就是可以賦值給css屬性值的變量。如果你寫過JavaScript，這種方式跟JavaScript的function很像:@mixin link-colors($normal, $hover,……