DIV CSS 佈局教程網

很多初學者剛剛接觸的時候，都容易糾結什麼時候用混合宏，什麼時候用繼承，然後什麼時候用占位符。其實，這3個都有它們自身的優缺點。這一節我們來詳細探討一下這3個在實際開發中的不同。

由於“繼承@extend”和“占位符%placeholder”都是屬於繼承的2種輸出方式，這一節我們姑且把這兩者統稱為“繼承”，然後再與混合宏比較。

繼承、占位符和混合宏的聲明方式和調用方式 方法 聲明方式 調用方式 繼承 .class @extend 占位符 %placeholder @extend 混合宏 @mixin @include

一、繼承與混合宏

對於繼承（包括@extend和%placeholder）和混合宏，我們總結出以下幾點：

• （1）繼承和混合宏都能實現相同代碼塊的重用，極大提高開發效率；
• （2）繼承的使用一般不存在代碼冗余，而混合宏的使用會存在代碼冗余；
• （3）繼承不可以傳遞參數，而混合宏可以傳遞參數；

我們先來看幾個例子，然後再從中對比一下繼承與混合宏的區別。

舉例1：使用繼承來實現

 
.spriteAll
{
    bakckground:url(images/sprite.png) no-repeat;
}
.sprite-1
{
    @extend .spriteAll;
    background-position:0 -30px;
}
.sprite-2
{
    @extend .spriteAll;
    background-position:0 -60px;
}

編譯出來的CSS代碼如下：

 
.spriteAll, .sprite-1, .sprite-2 
{
    bakckground: url(images/sprite.png) no-repeat;
}
.sprite-1 
{
    background-position: 0 -30px;
}
.sprite-2
{
    background-position: 0 -60px;
}

舉例2：使用混合宏來實現

 
@mixin spriteAll
{
    bakckground:url(images/sprite.png) no-repeat;
}
.sprite-1
{
    @include @spriteAll;
    background-position:0 -30px;
}
.sprite-2
{
    @include @spriteAll;
    background-position:0 -60px;
}

編譯出來的CSS代碼如下：

 
.sprite-1 
{
    bakckground: url(images/sprite.png) no-repeat;
    background-position: 0 -30px;
}
.sprite-2 
{
    bakckground: url(images/sprite.png) no-repeat;
    background-position: 0 -60px;
}

分析：

從上面兩個例子，我們可以很清楚地看出混合宏有一個致命的缺點：編譯出來的CSS不會把相同的代碼塊合並，造成代碼冗余。

雖然混合宏有代碼冗余的缺點，但是它也有一個明顯的優點，那就是：可以使用傳遞參數的方式來封裝功能代碼塊。

舉例：

 
@mixin textCenter($height)
{
    height:$height;
    line-height:$height;
    text-align:center;
}
#div1
{
    @include textCenter(20px);
    width:100px;
}
#div2
{
    @include textCenter(40px);
    width:200px;
}

編譯出來的CSS代碼如下：

 
#div1 
{
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 100px;
}
#div2
{
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
}

分析：

上面這個例子，如果要使用繼承就無能為力了。在實際開發的過程中，對於“功能代碼塊”（類似於JavaScript中的函數）我們都是使用混合宏來實現的，因為功能代碼塊往往是可以通過傳遞不同的參數來滿足我們開發的不同需求。

二、“繼承@extend”和“占位符%placeholder”

從之前的學習我們知道，“占位符%placeholder”並非用來替換“繼承@extend”的，而是用來配合“繼承@extend”來使用的。也就是說，繼承@extend有2種輸出方式：

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

這個我們很好理解，小伙伴們回去翻一翻“Sass占位符”這一節就知道了，這裡不再重復說明。