sass 的具体用法总结

scss编译后的css 文件中忽略识别单行注释，显示多行注释

1.单值变量

在scss文件中编写：

$a : red;  //单值变量使用$符号声明
html {
   
    color: $a; //写单值变量$a
}

编译结果:

html {
   
  color: red;
}

2.多值变量

在scss文件中编写：

$b : red green blue; //多值变量空格隔开
.box1 {
   
    color: nth($b,1);//调用时使用nth(变量名，需要的值的位置)
}
.box2 {
   
    color: nth($b,2);
}
.box3 {
   
    color: nth($b,3);
}

编译结果:

.box1 {
   
  color: red;
}

.box2 {
   
  color: green;
}

.box3 {
   
  color: blue;
}

3. 复杂类型变量-类比数组

在scss文件中编写：

$c : (1 10px 20px)(2 20px 30px)(3 30px 40px)(4 40px 50px); //复杂类型变量 类比js中的数组
@each $a,$b,$c in $c {
      //$a,$b,$c分别代表每一项  遍历
    .box#{
   $a}{
     //在选择器中拼接需要用#{
   }
        width: $b