sass最佳实践

sass

变量

可以实现统一的布局，比如统一的内边距，统一的外边距，统一的颜色，统一的字号。　　

嵌套

可以根据组件的嵌套方式来嵌套css代码，方便收缩，查找。代码结构非常清晰，有利于以组件的方式开发

混合

代码重用的时候需要用到，运用混合又会遇到另外一个问题，当相同的代码在不同的地方重新编写，会使代码冗余，比如：

@mixin clearfix{

　　&:before,&:after{

　　　　display:block;
　　　　content:'';
　　　　height:0;
　　　　clear:both;
　　}

}

.container{
@include clearfix;
}

.tab{
@include clearfix;
}

这个时候，在编译之后的css文件里面，clearfix这段代码其实是重复写了很多次，以下面的编写方式才是对的

@mixin clearfix{

　　&:before,&:after{

　　　　display:block;
　　　　content:'';
　　　　height:0;
　　　　clear:both;
　　}
}

.container,.tab{
@include clearfix;
}

组件　　　

sass编写组件时都是以[class='tab'],[name='tab'],[type='text'],[type='password']的方式来编写，也就是说，不能用ID或者name来编写。

ID或者name一般是用来实例化插件或者供后台程序使用