sass学习7——继承

.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规则。