DIV CSS 佈局教程網

在Sass中，我們引入了占位符“%placeholder”來進一步優化“@extend”。我們先來看一個例子。

舉例：使用繼承“@extend”

 
.btn
{
    padding:6px 10px;
    border:1px solid silver;
    font-size:14px;
}
.btn-primary
{
    @extend .btn;
    color:white;
    background-color:red;
}
.btn-second
{
    @extend .btn;
    color:orange;
    background-color:green;
}

編譯出來的CSS代碼如下：

 
.btn, .btn-primary, .btn-second
{
    padding: 6px 10px;
    border: 1px solid silver;
    font-size: 14px;
}
.btn-primary 
{
    color: white;
    background-color: red;
}
.btn-second 
{
    color: orange;
    background-color: green;
}

分析：

從這個例子我們可以看出，繼承“@extend”是非常好用的。通過@extend，我們可以直接在“.btn-primary”和“.btn-second”中插入定義好的“.btn”，這樣每次只要你修改了“.btn”中的樣式，“.btn-primary”和“.btn-second”中的樣式都會同時修改。

但是稍微細心的小伙伴應該也發現了，如果我們的HTML中沒有任何一個元素使用“.btn”的話，“.btn”存在的唯一目的就是僅僅用來給“.btn-primary”和“.btn-second”繼承。也就是說，“.btn”這個類在編譯出來的CSS中是多余的。那有沒有更好的辦法來實現我們預期效果呢？

在新版本的Sass中，引入了“占位符%placeholder”來優化“繼承@extend”的輸出。

舉例：

 
%btn
{
    padding:6px 10px;
    border:1px solid silver;
    font-size:14px;
}
.btn-primary
{
    @extend %btn;
    color:white;
    background-color:red;
}
.btn-second
{
    @extend %btn;
    color:orange;
    background-color:green;
}

編譯出來的CSS代碼如下：

 
.btn-primary, .btn-second
{
    padding: 6px 10px;
    border: 1px solid silver;
    font-size: 14px;
}
.btn-primary 
{
    color: white;
    background-color: red;
}
.btn-second 
{
    color: orange;
    background-color: green;
}

分析：

上一個例子，我們是定義一個基類“.btn”（類，都是以“.”開頭）。而在這個例子中，我們是定義一個占位符“%btn”（占位符，都是以“%”開頭）。我們對比一下這兩個例子的輸出結果就可以知道，使用占位符的輸出結果是不包含基類的。

“占位符%placeholder”並非用來替換“繼承@extend”的，而是用來配合“繼承@extend”來使用的。從上面我們可以知道，繼承@extend有2種輸出方式：

• （1）需要保留基類的：只使用@extend來實現；
• （2）不需要保留基類的：使用@extend配合%placeholder來實現；

此外在實際開發中，繼承中的基類是否就一定要去掉呢？這個倒不一定。如果你的HTML結構需要用到基類，則不需要使用占位符的方式來去掉；如果你的HTML不需要用到基類，則建議使用占位符配合繼承來去掉。