SASS

Sass常用的写法：

1.引入函数编程的思想加入变量的，变量的写法是$aaa: red,以$开头，后面使用时就直接使用$aaa,若要拼接使用则需要用#{$aaa}来包裹变量。例如：
$position: left；
div{
      border-#{$position}:1px solid #ccc;
}

2.sass中容许使用计算功能，简单的加减乘除都可以使用：
div{
      width: 100px + 100px;
      height: (500px/2);                   /*注意除号要用括号装起来*/
      border: 1*5px solid #ccc;
      }

3.嵌套写法
之前我们写的后代元素选择器  div p {font-size： 18px;},sass中的写法如下：
div{
     p{
        font-size: 18px;
       }
}

4.属性写法的嵌套（必须带上冒号：，与选择器嵌套的区别）例如下面书写div的border-radius：
div{
     border:{
          radius: 50%；
     }
}

5.在嵌套代码块内使用$代表父元素，例如a:hover可如下书写：啊：
a{
       &:hover{
              background: yellow;
       }
}

6.三种注释都可以几种略微有所不同如下：
/*注释*/这种css的标准注释 编译后也会存在
// 只保存在sass文件中，编译后会不存在了
/*！*/表示重要信息，通常用于版本版权信息

7.样式的继承：例如之前的把两个拥有相同样式的写在一起。sass写法如下：
.class1 {color: red;background: yellow; border: 1px solid;}
.class2 {
            @extend .class1;
            font-size： 20px;
}
/*这样class2类中就具有了class1的所有的样式*/

8.Mixin，如同react和vue中的引入公共块一样，这里也是代表可以重用的代码块
使用@mixin定义一个代码块：
@mixin gogo{
         width: 100px;
         height: 200px；
}
使用”@include 名称“引入这个代码块：
div{
     @include gogo;
     color: red;
}
mixin一个强大的大方可以向函数一样传递参数，可以根据传递的额不同参数给不同的元素不同的值
@mixin gogo($num: 200px){    //若这里写了参数值则是默认值，也可以传多个参数
     height: $num;
}
div{
     @include gogo（500px）  // 此处传参，若是不传参则为默认值
}

9.@import用来插入文件，若插入的是.css文件，则等同于css的import,如引入.scss文件，则直接@import "style/a.scss"

10.高级用法

    10.1 if条件判断
       p{
              @if 1+5==6 {color: red;font-size: 28px}
              @if 5<3 {border: 1px solid #ccc}
        }

      10.2 if...else...
      p{
          @if 1+5 == 6 {
                color: red;font-size: 28px；
          }@else{
                color: green;font-size: 100px;
          }
       } 

11.sass函数，sass永许自定义函数
@function gogo($num){
        @return $num+10px
}
div{
     font-size： gogo(20px)
}