SCSS扩展与继承

SCSS扩展与继承

使用@extend可以将一个选择器的css属性共享到另一个选择器

特性：如果有多个选择器使用了同一个的扩展 会将这些选择器用并级选择器选中

占位符：以 % 开头，本身不会生成任何 CSS 规则，只有被 @extend 引用后才会输出。

scss代码

//创建扩展 %扩展名{代码块}
%message-shared{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.bold{
    font-weight:bold;
}
//继承扩展
.message{
    @extend %message-shared;
}
.success{
    @extend %message-shared;
    border-color:green;
}
.error{
    @extend %message-shared;
    border-color:red;
}
.warning{
    @extend %message-shared;
    border-color:yellow;
}
.box{
    @extend .bold;
}

css代码

.warning,.error,.success,.message{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    border-color:green;
}
.error{
    border-color:red;
}
.warning{
    border-color:yellow;
}
.box{
    font-weight:bold;
}