DIV CSS 佈局教程網

CSS具有2大特性：繼承性和層疊性。CSS的繼承性，指的是子元素繼承了父元素的某些樣式屬性，例如在父元素中定義字體顏色（color），子元素會繼承父元素的字體顏色。對於CSS這些，詳細請查看“HTML和CSS進階教程”的“3.2 CSS特性”這一節。

在Sass中，我們可以使用“@extend”來繼承一個樣式塊，從而實現代碼的重用。

舉例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;
}

分析：

在這個例子中，我們定義了一個“.spriteAll”類用來存放公共樣式，然後在“.sprite-1”和“.sprite-2”中使用@extend來繼承“.spriteAll”類。

舉例：

 
.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;
}

分析：

在這個例子中，我們定義了一個“.btn”類用來存放公共樣式，然後在“.btn-primary”和“.btn-second”中使用@extend來繼承“.btn”類。

從上面兩個例子我們可以看出，繼承這種方式來實現代碼的重用是非常實用的。它使得代碼更為精簡，並且一目了然，具有更高的可讀性和可維護性。