sass的一些坑，一些规范

sass 一些新手容易踩的坑

一、变量
运用变量的时候，变量的作用域
$ 变量名：变量值

$color-black: #000;
body{
$color-black: #333;
}
.color{
color:$color-black
}

编译成color：#000，全局>局部 (body)
Sass 提供 !global 可以影响全局变量一般慎用

$color-black: #000;
body{
$color-black: #333 !global;
}
.color{
color:$color-black
}

编译结果是color：#333；

二、嵌套
尽量嵌套不超过4层，少用选择器关联

.home{
.tag{
& > div.color{
.span{……}
}
}
}

编译成.home .tag > div.color .span{……}，后期做优化、修改不方便

三、计算
sass 里/ 号要加括号，因为在css里/符号是font的简写font12px/1.5。
计算单位也要统一
不统一单位的css里calc()可以实现
或

$width: 100%;
.w-4{
width:$width / 4;
}

这种也行

四、@mixin

@mixin border-radius{
-webkit-border-radius: 5px;
 -moz-border-radius: 5px; 
-o-border-radius: 5px; 
-ms-border-radius: 5px; 
border-radius: 5px;
}

引用

button{
@includ border-radius;
}

在写公用的一些代码，做好用变量来表示

@mixin border-radius($radius){
-webkit-border-radius: $radius;
 -moz-border-radius: $radius; 
-o-border-radius: $radius; 
-ms-border-radius: $radius; 
border-radius: $radius;
}

调用

button{
@includ border-radius(5px);
}

尽量简化代码

五、选择器继承

在用@extend调用的时候最好是写占位符的clss

.input{
padding:10px;
}

.bnt{
@extend .input
}

编译结果

.input .bnt{
padding:10px;
}

这种调用不是bnt里添加input样式，而是bnt追加在input后，后期修改input样式会影响bnt样式。

%input{
padding:10px;
}

.bnt{
@extend  %input
}

这种占位符调用的时候才编译