首先我们从一段代码开始入手。如下代码所示,先通过下文的介绍再回头分析这段代码。
$cicc-red: red;
@mixin setRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
%btn-display {
display: block;
color: #ffffff;
font-size: 20px;
padding: 5px 20px;
margin-bottom: 10px;
&:hover {
text-decoration: none;
}
}
.buy-btn {
background: $cicc-red;
@include setRadius(5px);
@extend %btn-display;
}
@extend拓展
@extend的作用可以让开发者不用通过添加类名给某个节点增加特殊样式。例如:
html代码
<div class="error seriousError">
Oh no! You've been hacked!
</div>
css代码
.error
{
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
这样的结构和样式的耦合性比较强,需要另外添加seriousError的类名。可以使用sass解决这个问题,如下:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译后的css代码为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
工作原理
@extend会将被扩展的类名下所嵌套的样式都给包含进来,如下:
sass代码:
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译生成的css代码如下:
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion, .intrusion.seriousError {
background-image: url(/image/hacked.png?1410339978);
}
.seriousError {
border-width: 3px;
}
合并选择器时,@extend会避免无谓的重复,.seriousError.seriousError将编译为.seriousError,不会产生多余的选择器,不能匹配多个元素的选择器(比如#main#footer)。
扩展复杂的选择器
class类名不是唯一可以被扩展的,还可以扩展单个元素,比如a:hover,例如:同class元素一样,a:hover的样式将继承给.hoverlink。
sass代码:
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
编译后的css代码为:
a:hover, .hoverlink {
text-decoration: underline; }
多重延伸
一个选择器可以同时延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器:
sass代码
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.attention, .seriousError {
font-size: 3em;
background-color: #ff0; }
.seriousError {
border-width: 3px; }
链式继承
一个选择器被延伸给第二个后,可以继续将第二个选择器延伸给第三个。
sass代码
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
编译后的css代码如下:
.error, .seriousError, .criticalError {
border: 1px #f00;
background-color: #fdd; }
.seriousError, .criticalError {
border-width: 3px; }
.criticalError {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%; }
选择器序列
类似.foo.bar或者.foo+.bar这样的选择器序列不能被单个选择器继承。但是,却可以将选择器延伸给选择器列。
sass代码
#fake-links .link {
@extend a;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
编译后的css代码为:
a, #fake-links .link {
color: blue;
}
a:hover, #fake-links .link:hover {
text-decoration: underline;
}
合并选择器列
当两个列合并时,如果没有包含相同的选择器,将生产两个新选择器。例子如下:
sass代码
.meng a {
font-weight:bold;
}
.long .link {
@extend a;
}
编译后的css代码为:
.meng a, .meng .long .link, .long .meng .link {
font-weight: bold;
}
从上面的例子不难看出,类名".meng"中的"a"选择器被类名".long"中的类名".link"继承了,但是由于没有在同一个父级下,会生产交叉合并的编译结果。解决这个问题比较简单,可将父级元素修改成一样,或者将.meng a修改成一个类名。
extend-only选择器
有时,需要定义一套样式并不是给某个元素用,而是通过@extend指令使用。如果使用普通的css规则,最后会编译出很多用不到的样式,也容易与其他样式冲突,所以,sass引入了”占位符选择器",看起来像普通的id或class选择器,只是"#"或"."被替换成了%。可以像class或者id选择器那样使用,当它们单独使用时,不会被编译到css文件中。
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
编译后的css代码
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
在指令中延伸
在指令(比如在@media中),使用@extend时有一些限制:sass不可以将指令层外的css规则延申给指令层内的css。也就是说,如果在指令中使用@extend,必须延伸给相同指令层中的选择器。下例是个错误的代码:
sass代码
.error {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
// INVALID EXTEND: .error is used outside of the "@media print" directive
@extend .error;
border-width: 3px;
}
}
编译的css代码为:
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
border-width: 3px;
}
}
以下的代码才是正确的
@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}
编译后的css代码为
@media print {
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
}