手把手教你使用Sass，CSS擴充套件語言Sass使用文件說明

阿新 • • 發佈：2021-09-15

sass介紹
1.使用變數
2.巢狀css規則
3.匯入sass檔案
4.註釋
- 靜默註釋
5.混合器
6.繼承
- 使用選擇器繼承來精簡css
- 何時使用繼承
7.小結

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中文手冊

本文來自部落格園，作者：葉子玉，轉載請註明原文連結：https://www.cnblogs.com/knuzy/p/15271133.html