首先知道 CSS具有两大特性:继承性,层叠性
其中继承性是指:子元素继承了父元素的某些样式属性,例如在父元素中定义字体颜色(color),子元素会继承父元素的字体颜色。
所以:在Sass中,使用 “@extend” 来继承一个样式块,从而实现代码的重用。
举例:
.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
;
}
从这个例子我们可以看出,继承“@extend”是非常好用的。通过@extend,我们可以直接在“.sprite
-1
”和“.sprite
-2
”中插入定义好的“.spriteAll
”,这样每次只要你修改了“.spriteAll
”中的样式,“.sprite
-1
”和“.sprite
-2
”中的样式都会同时修改。
但是,注意到:
HTML中没有任何一个元素使用".spriteAll
",它的存在就只是用来给它的孩子继承,那么它的编译就是多余的,那么有什么解决办法呢?这就引出了下一篇随笔---用占位符%placeholder”来优化“继承@extend”的输出。