sass @extend（繼承）指令的詳細使用

在設計網頁的時候常常遇到這種情況：一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式。

通常會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。

普通CSS的實作

接下來以警告框為例進行講，解4種類型

類型	說明
info	資訊！請注意這個資訊。
success	成功！很好地完成了送出。
warning	警告！請不要送出。
danger	錯誤！請進行一些更改。

所有警告框的基本樣式（風格、字型大小、内邊距、邊框等…） ，因為我們通常會定義一個通用alert樣式，類似于這樣的

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
           

然後定義不同警告框單獨風格：

.alert-info{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
           

然後這樣使用：

<div class="alert alert-info">
    資訊！請注意這個資訊。
</div>

<div class="alert alert-success">
    成功！很好地完成了送出。
</div>

<div class="alert alert-warning">
    警告！請不要送出。
</div>

<div class="alert alert-danger">
    錯誤！請進行一些更改。
</div>
           

最後的效果：

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-5hpp9HRT-1659490130288)(D:\html\一些資料\營銷\視訊營銷\軟體相關\CSS預處理器SASSSCSS從入門到進階進階—完整視訊課程【最新錄制】\第九講 sass @extend（繼承）指令詳解\images\image-20220803090251819.png)]

使用繼承@extend進行改進

基本樣式我們沒有變，主要是各個警告框單獨的樣式

.alert-info{
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    @extend .alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    @extend .alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
           

這樣編譯後：

.alert, .alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }

.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
           

使用時就不須要再寫基本類了

<div class="alert-info">
    資訊！請注意這個資訊。
</div>

<div class="alert-success">
    成功！很好地完成了送出。
</div>

<div class="alert-warning">
    警告！請不要送出。
</div>

<div class="alert-danger">
    錯誤！請進行一些更改。
</div>
           

使用多個@extend

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important{
    font-weight: bold;
    font-size: 14px;
}

.alert-danger{
    @extend .alert;
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
           

@extend多層繼承

上面的方式還可以寫成

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important{
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}

.alert-danger{
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
           

占位符

你可能發現被繼承的css父類并沒有被實際應用，也就是說html代碼中沒有使用該類，它的唯一目的就是擴充其他選擇器。

對于該類，可能不希望被編譯輸出到最終的css檔案中，它隻會增加CSS檔案的大小，永遠不會被使用。

這就是占位符選擇器的作用。

占位符選擇器類似于類選擇器，但是，它們不是以句點(.)開頭，而是以百分号(%)開頭。

當在Sass檔案中使用占位符選擇器時，它可以用于擴充其他選擇器，但不會被編譯成最終的CSS。

之前的代碼進行改寫：

%alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
.alert-info{
    @extend %alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    @extend %alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    @extend %alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    @extend %alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
           

編譯後：

.alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }

.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
           

從結果可以看到，沒用alert類的樣式生成，因為它根本沒有用，是以此種情況用“占位符選擇器”更合适

[email protected]指令的基本使用就是這些，對你有用的話，記得點贊哦~