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代码

上一篇:JavaScript自动生成博文目录导航/TOP按钮


下一篇:[ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassChangeError: Found class jline.Terminal, but interface was expected