sass语法整理

1、变量（定义变量后，在选择器里可以直接引用）

$yanse: rgb(223, 148, 148);
h1{
        color: $yanse；
    }

2、嵌套（父选择器里可以嵌套子选择器）

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}

3、mixin 混合 （相当于预先写好了一组样式，其它地方直接引用）

无参数：

@mixin hunhe {
     color: red;
     a {
         font-size: 12px;
     }
}

div{
    @include hunhe;  
}
// 相当于
div {
  color: red;
}
div a {
  font-size: 12px;
}

有参数：

@mixin hunhe($one,$two) {
     color: $one;
     a {
         color: $one;
         font-size: $two;
     }
}

div{
    @include hunhe(red,15px);  
}
// 也可以这样写，参数位置随意变换
div{
    @include hunhe($two:15px,$one:red);  
}

4、 继承/扩展（一个选择器可以继承另一个选择器的全部样式）

.one{
    color: #000;
}
.one a{
    font-size: 10px;
}
.two{
    @extend .one;
    background-color: #fff;
}
//相当于：
.one, .two {
  color: #000;
}

.one a, .two a {
  font-size: 10px;
}

.two {
  background-color: #fff;
}

5、计算功能

  $chang: 20px;
body{   
    margin: (10px*2);
    left: 20px + $chang;
} 
//相当于：
body {
  margin: 20px;
  left: 40px;
}

6、if判断（不常用）

$jia: false;
body{   
   @if false{
       color: red;
   }
   @if 2>3 {
       background-color: white;
   }@else{
       background-color: black;
   } 
}  
//相当于：
body {
  background-color: black;
}

7、for循环（不常用）

@for $i from 1 to 3 {
    .div#{$i}{
       height: $i*20px;
    }
}
// 相当于：
.div1 {
  height: 20px;
}

.div2 {
  height: 40px;
}

8、列表循环（不常用）

$yanse: red blue black;
@each $i in $yanse {
    
    .div#{$i}{
      color: $i;
    }

}
// 相当于：
.divred {
  color: red;
}

.divblue {
  color: blue;
}

.divblack {
  color: black;
}

9、 while循环，有判断条件更灵活。

$gao: 1;
@while $gao<4 {
    .div#{$gao}{
        height: $gao*10px;
    }
   $gao : $gao+1;
}
// 相当于：
.div1 {
  height: 10px;
}

.div2 {
  height: 20px;
}

.div3 {
  height: 30px;
}