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