sass的继承,混合宏,占位符的用法总结
SCSS中混合宏使用
@mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); } }
@extend如何工作
.icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { @extend .icon; /*错误图标指定的样式... */ } .info-icon { @extend .icon; /* 信息图标指定的样式... */ }
sass编译成css
.icon, .error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { /*错误图标指定的样式... */ } .info-icon { /* 信息图标指定的样式... */ }
使用选择器占位符%placeholder
以上代码编译后
.error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { /*错误图标指定的样式... */ } .info-icon { /* 信息图标指定的样式... */ }
编译出来的CSS代码中将不再包括.icon
了。