sass語法

1.安裝

2.Webstorm下設置sass

3.變量

1.以$開頭；後邊緊跟變量名；
例如：
1.1普通變量
$color:#333
.con{
    background:$color;
}
1.2特殊變量
一般我們定義的變量都爲屬性值，可直接使用，但是如果變量作爲屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。
例如：
$position：top；
.header{
      margin-#{$position}:20px
}

4.計算功能

body{
    margin：（14px/2）;
    top:50px+100px;
    right:$value*5;
}

5.嵌套

5.1選擇器嵌套
例如：
div h{
      font-size:16px;
}
可以用sass寫法：
div{
        h{
            font-size:16px;
            &:hover{
                  color:red;
              }
      }
}
5.2屬性嵌套
例如：
.con{
   border:{
      style:solid;
      left:{
          width:2px;
          color:red;
          }
       right:{
          width:2px;
          color:blue;
          }
    }

6.繼承

例如：
.class1{
            border: 1px solid #333;
        }
        .class2{
            @extend .class1;
            font-size: 12px;
        }

7.混合

例如：
@mixin left{
            float:left;
            background:red;
        }
        .class1{
            border: 1px solid #333;
            @include left;
        }
//強大之處在與其方法是可以傳參的；同樣也可以傳多個參數；
@mixin left（$color:red；$f_float:left）{
            float:$f_float;
            background:$color;
        }
        .class1{
            border: 1px solid #333;
            @include left(green,left);
        }

8.插入文件：使用@import命令，用來插入外部文件；

例如：
@import “name.scss”