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]类。

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

查看更多关于Sass继承实例讲解的详细内容...