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;
sass 默认 !default 降低优先级

$color: #000;
$color: #fff !default;
body{
$color: #333;
}
.color{
color:$color
}

编译成 color:#000;
!default 默认值，color 不设定就是！default 的，有就用设定的。

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

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

编译成.home .tag > div.color .span{……}，后期做优化、修改不方便
@at-root 跳出嵌套

.home{
@at-root .tag{……}
}

编译成
.tag{……}
但在 @madia 里@at-root需要加参数

@media screen an (max-width:750px) {
.home{
@at-root(without:media) .tag{……}
}
}

跳出@media 但没跳出home 还需要添 加rule

@media screen an (max-width:750px) {
.home{
@at-root(without:media rule) .tag{……}
}
}

三、计算
1、sass 里/ 号要加括号，因为在css里/符号是font的简写font12px/1.5。
2、如果除法的数值里有函数、变量或还有其他运算符号也可以不带括号。
3、乘除法的时候，单位统一，有一个数值带单位就行，除法两个数值都带单位，结果是不带单位的。
有变量函数除外。
4、计算单位也要统一，有变量函数除外。
不统一单位的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
}

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

注意@extend目前不支持继承父级里的子集或相邻兄弟选择器 ‘+ ’ 关系的
注意@extend 和@media 混合用时，@extend 不能调用@media 之外的