Sass继承

• 继承
• 继承的作用域
• 占位符 --- %

sass中的继承使用@extend标识符，一次可以继承一个或多个样式。

继承

可以一次继承一个或多个样式。例如：

.alert{
    height:30px;
    width:100px;
}
.title{
    color:yellow;
}
.success{
    @extend .alert;
    background-color:green;
}
.warn{
    @extend .alert, .title;
    background-color:red;
}

编译结果如下:

.alert, .success, .warn {
  height: 30px;
  width: 100px;
}

.title, .warn {
  color: yellow;
}

.success {
  background-color: green;
}

继承的作用域

继承在指令中是有作用域问题的，继承是无法使在指令如@media之外的选择器继承的，要是想要继承就只能在写指令中。

占位符 --- %

占位符可以使样式直接添加到继承的样式中，例如：

%alert{
    height:30px;
    width:100px;
}
%title{
    color:yellow;
}
.success{
    @extend %alert;
    background-color:green;
}
.warn{
    @extend %alert, %title;
    background-color:red;
}

编译结果如下:

.success, .warn {
  height: 30px;
  width: 100px;
}

.warn {
  color: yellow;
}

.success {
  background-color: green;
}

.warn {
  background-color: red;
}