手把手教你使用Sass，CSS擴展語言Sass使用文檔說明

sass介紹

專業級css擴展語言

1.使用變量

把反覆使用的css屬性值定義爲變量，然後通過變量名來引用，就可以避免重複書寫這一屬性值。

sass使用$符號標識變量。

變量聲明

::: tip Tips

當變量定義在css規則塊外時：同一個樣式表中都可以引用；
當變量定義在css規則塊內時：該變量只能在此規則塊內使用
使用時一般在css規則塊外定義變量。
:::

$nav-color: #F90;  // 規則塊外定義
nav {
    $width: 100px;  //規則塊內定義使用
    width: $width;
    color: $nav-color;
}
// 編譯後
nav {
    width: 100px;
    color: #F90;
}

::: warning
警告
:::

::: danger
危險
:::

---
title: docs
lang: en-US
---

變量引用

凡是css屬性的標準值（比如說1px 或者solid）存在的地方，變量就可以使用。css生成時，變量會被它們的值所替代。

之後，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。

$highlight-color: #F90;
.selected {
    border: 1px solid $highlight-color;
}
// 編譯後
.selected {
    border: 1px solid #F90;
}

在聲明變量時，變量值也可以引用其他變量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
    border: $highlight-border;
}
// 編譯後
.selected {
    border: 1px solid #F90;
}

變量命名技巧

用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。
在sass的大多數地方，中劃線命名和下劃線命名的內容是互通的，除了變量，也包括對混合器和Sass函數的命名。

$link-color: blue;
a {
    color: $link-color;
}
// 編譯後
a {
    color: blue;
}

2.嵌套css規則

在Sass中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。

#content {
    article {
        h1 {
            color: #333;
        }
        p {
            margin-bottom: 1.4em;
        }
    }
    aside {
        background-color: #EEE;
    }
}
// 編譯後
#content  article h1 {
    color: #333;
}
#content  article p {
    margin-bottom: 1.4em;
}
#content  aside {
    background-color: #EEE;
}

父選擇器的標識符：&

在爲父選擇器添加僞類時，&非常有用。

article a {
    color: blue;
    &:hover {
        color: red;
    }
}

第二種用法：在父選擇器之前添加選擇器。
例如：當用戶在使用IE瀏覽器時，你會通過JS在<body>標籤上添加一個ie的類名，爲這種情況編寫特殊的樣式：

#content aside {
    color: red;
    body.ie & {
        color: green;
    }
}
// 編譯後
#content aside {
    color: red;
}
body.ie #content aside {
    color: green;
}

羣組選擇器的嵌套

// css寫法
.container h1, .container h2, .container h3 {
    margin-bottom: .8em;
}
// sass嵌套特性
.container {
    h1,h2,h3 {
        margin-bottom: .8em;
    }
}

子組合選擇器和同層組合選擇器：>, +, ~

// 選擇article下的所有section選擇器的元素
article section {
    margin: 5px;
}
// 只選擇article下緊跟着的子元素中是section選擇器的元素
article > section {
    border: 1px solid #ccc;
}
// +: 同層相鄰組合選擇器：選擇header元素後緊跟着的p元素
header + p {
    font-size: 1em;
}
~：同層全體組合選擇器：選擇所有跟在article後面的同層article元素
article ~ article {
    border-top: 1px dashed #ccc;
}

這些組合選擇器可以應用在sass的規則嵌套中，可以把它們放在外層選擇器後面，或者裏層選擇器前面。

article {
    ~ article {
        border-top: 1px solid #ccc;
    }
    > section {
        background: #eee;
    }
    dl > {
        dt {
            color: #333;
        }
        dd {
            color: #555;
        }
    }
    nav + & {
        margin-top: 0;
    }
}
// 編譯後
article ~ article {
    border-top: 1px solid #ccc;
}
article > section {
    background: #eee;
}
article dl > dt {
    color: #333;
}
article dl > dd {
    color: #555;
}
nav + article {
    margin-top: 0;
}

嵌套屬性

在sass中，除了css選擇器，屬性也可以進行嵌套。
嵌套屬性的規則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性後邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}
// 編譯後
nav {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

::: details 對於屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規則(點擊查看代碼)：

nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}
// 編譯後
nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
}

:::

3.導入sass文件

使用sass部分文件

那些專門爲@import命令編寫的文件，並不需要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。
sass局部文件命名規範：命名以下劃線開頭。
當你@import一個局部文件時，可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";

默認變量值

一般情況下，你反覆聲明一個變量，只有最後一處聲明有效且它會覆蓋前邊的值。

$link-color: blue;
$link-color: red;
a {
    color: $link-color;
}

假如你寫了一個可被他人通過@import導入的sass文件，你可能希望導入者可以定製修改sass文件庫中的某些值。使用sass的!default標籤可以實現這個目的。它很像css屬性中!important標籤的對立面，不同的是!default用於變量，含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。

$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

::: tip TIP
如果用戶在導入你的sass局部文件之前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明，則$fancybox-width將默認爲400px。
:::

嵌套導入

跟原生的css不同，sass允許@import命令寫在css規則內部。例如：有一個名爲_lightblue-theme.scss的局部文件，內容如下：

aside {
    background: blue;
    color: #fff;
}

把它導入到一個css規則內，如下：

.lightblue-theme {
    @import "lightblue-theme"
}
// 生成的結果
.lightblue-theme {
    aside {
        background: blue;
        color: #fff;
    }
}

::: tip TIP
被導入的局部文件中定義的所有變量和混合器，也會在這個規則範圍內生效。這些變量和混合器不會全局有效，這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色主題或其它通過變量配置的樣式。
:::

原生的css導入

::: tip TIP
不能用sass的@import直接導入一個原始的css文件，但是因爲sass的語法完全兼容css，你可以把原始的css文件改名爲.scss後綴，即可直接導入了。
:::

4.註釋

靜默註釋

在原生的css中，註釋是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹去相應的註釋。sass靜默註釋的語法跟JavaScript的單行註釋的語法相同，以//開頭，註釋內容直到行末。

body {
    color: #333; // 這種註釋內容不會出現在生成的css文件中
    padding: 0; /* 這種註釋內容會出現在生成的css文件中 */
}

5.混合器

可以通過sass的混合器實現大段樣式的重用。混合器使用@mixin標識符定義，這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易通過引用這個名字重用這段樣式。

// 使用混合器添加跨瀏覽器的混合邊框
@mixin rounded-corners {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

然後你就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。

notice {
    background-color: #ccc;
    border: 1px solid #ddd;
    @include rounded-corners;
}
// sass會生成：
.notice {
    background-color: #ccc;
    border: 1px solid #ddd;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

何時使用混合器

::: tip TIP
判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否爲這個混合器想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣式，比如：rounded-corners,fancy-font,no-bullets，那麼往往能夠構造一個合適的混合器。如果你找不到，這時候構造一個混合器可能並不合適。
:::

混合器在某些方面跟css類很像，都是讓你給一大段樣式命名。
有時候僅僅把屬性放在混合器中還遠遠不夠，可喜的是，sass同樣允許你把css規則放在混合器中。

混合器中的css規則

混合器中不僅可以包含屬性，也可以包含css規則(包含選擇器和選擇器中的屬性)。

@mixin no-bullets {
    list-style: none;
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0px;
    }
}

給混合器傳參

混合器並不一定都要生成相同的樣式，可以通過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。當@include混合器時，參數其實就是可以賦值給
css屬性值的變量，這種方式和JavaScript的function很像。

@mixin link-colors($normal, $hover, $visited) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

當混合器被@include時，你可以把它當作一個css函數來傳參

a {
    @include link-colors(blue, red, green);
}
// sass會生成：
a {
    color: blue;
}
a:hover {
    color: red;
}
a:visited {
    color: green;
}

當你@include混合器時，有時候可能會很難區分每個參數是什麼意思，參數之間是一個什麼樣的順序。爲了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可：

a {
    @include link-colors(
        $normal: blue,
        $visited: green,
        $hover: red
    )
}

儘管給混合器加參數來實現定製很好，但是有時有些參數我們沒有定製的需要，這時候也需要賦值一個變量就變成很痛苦的事情了。所以sass允許混合器聲明時給參數賦默認值。

混合器默認參數值

爲了在@include混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。參數默認值使用$name: default-value的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數的引用。

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
) {
    color: $normal;
    &:hover {
        color: $hover;
    }
    &:visited {
        color: $visited;
    }
}

如果像下邊這樣調用：@include link-colors(red) $hover和$visited也會被自動賦值爲red。

6.繼承

使用選擇器繼承來精簡css

選擇器繼承是說一個選擇器可以繼承爲另一個選擇器定義的所有樣式。這個通過@extend語法實現。

// 通過選擇器繼承繼承樣式
.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

::: tip TIP
.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承
:::

// .seriousError從.error繼承樣式
.error a { // 應用到.seriousError a
    color: red;
    font-weight: 100;
}
h1.error { // 應用到hl.seriousError
  font-size: 1.2rem;
}

何時使用繼承

混合器主要用於展示性樣式的重用，而類名用於語義化樣式的重用。因爲繼承是基於類的（有時是基於其他類型的選擇器），所以繼承應該是建立在語義化的關係上。當一個元素擁有的類（比如說.seriousError）表明它屬於另一個類（比如說.error），這時使用繼承再合適不過了。(.seriousError類是另一個.error類的細化)

7.小結

參考：sass中文手冊