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了。