//继承
.btn{
padding: 4px 10px;
font-size: 14px;
}
.primary{
background:red;
@extend .btn;
} //%placeholder占位符
%mt5{
margin-top: 5px;
}
%pt5{
padding-top: 5px;
} .btn{
@extend %mt5;
}
| 混合宏 | 继承 | %placeholder | |
| 声明方式 | @mixin | .class | .placeholder |
| 调用方式 | @include | @extend | @extend |
| 使用环境 |
相同的代码块在不同的环境传递不同的值时 不足：多次出现调用的混合宏代码块 使代码冗长 |
不需要传递不同的值，使用继承会将相同的基类代码合并（.btn,span{color：res;}） 不足:如果基类不存在于HTML结构时，不论调用与否，都创建css文件 |
占位符和继承基本类似，不同之处在于 相同代码块并没有在基类中，而是额外声明的 如果不调用则不产生css代码 相同选择器调用 把选择器合并编译css代码 |