//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
以上的结果是在代码中样式写法为 class="seriousError",
但在html中展示的最终效果是 class="seriousError error"
1. css样式中使用 @extend 后,不仅会继承父类的样式 ,所有和父类组合在一起的样式也会被继承到子类中。
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}
2. 继承的高级用法
任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承