scss 初学笔记 三 继承

//继承
.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代码