Sass继承实例讲解

CSS具有2大特性：继承性和层叠性。CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。

在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”类。

从上面两个例子我们可以看出，继承这种方式来实现代码的重用是非常实用的。它使得代码更为精简，并且一目了然，具有更高的可读性和可维护性。