[TOC] ### 1. Sass 介紹 --- Sass 是由 Ruby 語言編寫的一款 CSS 預處理語言 Sass 官網的宣傳標語：世界上最成熟、最穩定、最強大的專業級CSS擴展語言 它是一款強化 CSS 的輔助工具，是對 CSS 的擴展，擴展了嵌套、混合、繼承、導入等高級功能，這些拓展令 CSS 更加強大優雅，可以更好的組織管理樣式文件，從而更高效的開發項目 Sass 英文官網：<https://sass-lang.com> Sass 中文官網：<https://sass.bootcss.com> Sass 中文官網：<https://www.sass.hk> ### 2. Sass 變量 --- ##### 聲明變量 Sass 變量的聲明和 CSS 屬性的聲明很像，任何可以用作 CSS 屬性值的賦值都可以用作 Sass 的變量值 ```sass color: #007aff; $uni-color-primary: #007aff; $basic-border: 1px solid black; $plain-font: "Myriad Pro" 、Myriad、 "Helvetica Neue"; ``` 與 CSS 屬性不同，Sass 變量可以在 CSS 規則塊定義之外存在。變量定義在 CSS 規則塊內時，只能在此規則塊內使用 ```sass $nav-color: #f90; nav { $width: 100px; width: $width; color: $nav-color; } ``` 變量名用中劃線還是下劃線分隔 ？ Sass 的變量名可以與 CSS 中的屬性名和選擇器名稱相同，包括中劃線和下劃線。Sass 對這兩種用法相互兼容。用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。使用中劃線的方式比較普遍，建議使用中劃線 ```sass $link-color: blue; a { color: $link_color; } ``` ### 3. 嵌套 CSS --- ##### 嵌套選擇器 在 CSS 中重復寫選擇器是非常煩人的 ```css #content article h1 { color: #333; } #content article p { margin-bottom: 1.4em; } #content aside { background-color: #eee; } ``` 使用 Sass 可以嵌套規則塊，避免了重復書寫，樣式可讀性更高 ```sass .container { div { font-weight: bold; } > div { font-size: 20px; } + div { background: red; } .left a { border: 1px solid green; &:hover { color: red; } } h1, h2, h3 { margin-bottom: 0.8em; } } ``` ##### 嵌套屬性 除了 CSS 選擇器，屬性也可以進行嵌套 ``` nav { border: { style: solid; width: 1px; color: #ccc; } } nav { border-style: solid; border-width: 1px; border-color: #ccc; } ``` 甚至可以像下邊這樣嵌套 ``` nav { border: 1px solid #ccc { left: 0px; right: 0px; } } nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; } ``` ### 4. 導入 SASS 文件 --- CSS 有個不常用的屬性，即 `@import` 規則，用于在一個 CSS 文件中導入其他 CSS 文件。然而，后果是只有執行到 `@import` 時，瀏覽器才會去下載其他 CSS 文件，這導致頁面加載起來特別慢 SASS 也有一個 `@import` 規則，但不同的是，SASS 的 `@import` 在生成 CSS 文件時就把相關文件導入進來。意味著所有相關的樣式都被歸納到了同一個 CSS 文件中，無需發起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器都可以在導入文件中使用 SASS 的 `@import` 規則并不需要指明被導入文件的全名，可以省略 `.scss` 和 `.sass` 文件后綴  ##### 默認變量值 一般情況下，一個變量聲明多次時，后面的值會將前面的值覆蓋掉 ```sass $color: red; $color: blue; ``` 假如你寫了一個可被別人 `@import` 導入的 SASS 文件，希望導入者可以定制修改該文件中的某些值，使用 `！default` 標簽可以實現這個目的，含義是：如果這個變量被聲明賦值了，就使用它聲明的值，否則就用這個默認值 下面示例中，home.scss 中的 $color 變量的值為 blue ```sass // test.scss $color: red !default; // home.scss $color: blue; @import "test.scss"; div { border: 2px solid $color; } ``` ### 5. 靜默注釋 --- CSS 中的注釋用于對樣式的簡單說明，但是，你可能并不希望每個瀏覽網站源碼的人都能看到注釋 SASS 提供了一種不同于 CSS 標準注釋格式的 `/***/`的注釋語法，也就是 **靜默注釋**，其內容不會出現在生成的 CSS 文件中。靜默注釋的語法和 JavaScript，PHP 等單行注釋的語法相同，以 `//` 開頭，注釋內容直到行末 ``` /* CSS 注釋 */ // SASS 靜默注釋 ``` ### 6. 混合器 --- 如果你的項目中有幾個地方小小的樣式類似（例如一致的字體和顏色），那么使用變量統一來處理這種情況是非常不錯的選擇 但是，當你的樣式變得越來越復雜，需要大段大段的重用樣式的代碼，獨立的變量就不能應付這種情況了，此時可以使用 **混合器** 實現大段樣式的重用 ##### 混合器語法 混合器使用 `@mixin` 標識符定義，然后在樣式表中使用 `@include` 來使用這個混合器 ```sass @mixin tag-style { font-size: 25px; border: 1px solid red; background-color: blue; } div { @include tag-style; text-align: center; } a { @include tag-style; float: left; } ``` 生成的 CSS ```css div { font-size: 25px; border: 1px solid red; background-color: blue; text-align: center; } a { font-size: 25px; border: 1px solid red; background-color: blue; float: left; } ``` ##### 何時使用混合器 首先，你要明白，利用混合器，可以很容易地在樣式表的不同地方共享樣式 如果你發現在不停的重復一段樣式，那么就應該把這段樣式構造成優良的混合器 混合器和 css 類很像，都是給一大段樣式命名，所以在選擇使用哪個的時候可能會產生迷惑。最重要的區別：類名是在 html 文件中用的，混合器是在樣式表中用的，意味著類名具有語義化含義，混合器是展示性的描述 ##### 混合器傳參 混合器并一定總得生成相同的樣式 可以給混合器傳參數，來定制混合器生成的樣式，混合器被 `@include` 時，可以把它當作一個 CSS 函數來傳參 默認參數值語法格式： ``` $name: 默認值 設置參數默認值示例： @mixin tag-style($size: 30px) {} ``` 混合器使用示例： ```sass @mixin tag-style($color, $size: 30px) { color: $color; font-size: $size; } div { @include tag-style(red, 15px); } span { @include tag-style(blue, 20px); } ``` ### 7. 繼承樣式 --- 選擇器的繼承：繼承一個選擇器定義的所有樣式，通過 `@extend` 語法實現 ``` // 繼承樣式 .error { border: 1px solid red; } .seriousError { @extend .error; border-width: 3px; } // 生成的 CSS .error, .seriousError { border: 1px solid red; } .seriousError { border-width: 3px; } ```