.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译成css
image.png
继承复杂的选择器
.hoverlink{
@extend a:hover;
}
a:hover{
text-decoration:underline;
}
```编译后```
a:hover, .hoverlink{
text-decoration:underline;
}
继承多个选择器
.one{
width:100px;height:100px;
}
.two{
@extend .one;
@extend .three;
background:red;
border:5px solid #000;
}
.three{
padding:10px;
}
```也可以写成如下代码```
.one{
width:100px;height:100px;
}
.two{
@extend .one, .three;
background:red;
border:5px solid #000;
}
.three{
padding:10px;
}
编译后：
image.png
链式继承（多重继承）
.one{
width:100px;height:100px;
}
.two{
@extend .one;
background:red;
border:5px solid #000;
}
.three{
@extend .two;
padding:10px;
}
编译后：
image.png
继承的局限性
虽然能够继承的选择器数量很多，但是也有很多选择器并不支持继承的，如包含选择器（.one .two）或者相邻兄弟选择器（.one+ .two）目前还是不支持继承。但若继承的元素是“a”,恰巧这个元素“a”又有hover状态的样式，那么hover状态的样式也会被继承。
.myLink{
@extend a;
}
a{
color:blue;
&:hover{
text-decoration:underline;
}
}
编译后：
image.png
继承交叉合并选择
.meng a{
font-weight:bold;
}
.long .link{
@extend a;
}
编译后：
image.png
从上面例子看出，类名“.meng”中的“a”选择器呗类名“.long”中的类名“.link”继承了，但是由于没有在同一个父级下，会产生交叉合并的编译结果。这种其实是可以解决的，就是把父级改成相同的即可。若父级不能改的话，那就需要再写一遍，或者将“.meng a”直接换成类名“.meng”,继承这个类名也可以。
如果改成如下代码有可能就是你想要的了：
.meng a{
font-weight:bold;
}
.long .link{
@extend .meng;
}
image.png
继承带%
有时候你想继承一个类名，但是并不想在HTML中使用，就单单想写一个能够继承的类名。尤其是不想让它出现在css样式中。我们可以用占位符来写一些几层的样式（如“%one”）,然后再通过@extend继承，这样就可以防止被渲染到css的规则集中。
#meng a%long{
color:blue;
font-weight:bold;
font-size:2em;
}
.notice{
@extend %long;
}
渲染后：
image.png
继承在指令中的作用域
继承是无法使用在指令如（@media）之外的选择器继承的，要是继承就只能写在指令中。
.one {
height: 300px;
}
@media print {
.two {
@extend .one;
width: 300px;
}
}
这种是错误的写法，有些编译器就会报错了，如果想让@media了的样式实现继承，那被继承的样式也需要写在@media里
编译后：
image.png
何时使用继承
混合器主要用于展示样式的重用，而类名用于语义化样式的重用。因为继承的基础是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的基础上。当一个元素拥的类表明它属于另一个类，这时就适合使用继承。不适合过量使用继承。
使用继承的最佳实践
使用继承不小心就可能造成css中包含大量的选择器复制。避免这种情况的方法就是不要再css规则中使用后代选择器（如.foo .bar）去继承css规则。
网友评论