sass

 1.先建一个后缀名为scss的文件，使用考拉编译器生成css文件，引入html  

2.使用变量  
  
    $color:red;  
    div{
      background-color: $color;
      height: 200px;
      width: 200px;
    }
    变量的运算
    $number:10px;
    $heidth:$number+190;
    $width:$number*20;  
3.继承
  
    #div{
      width: 200px;
      height: 200px;
    }
    
    #main{
    
      @extend #div;
      background-color: red;
    }  

4.混入  

    @mixin  div{
      width: 200px;
      height: 200px;
    }
    #main{
     @include div;
    }  
  
5.嵌套  

    #main{
      width: 200px;
      height: 200px;
      background-color: grey;
      p{color: red;font-size: 14px}
      #message{
        width: 50px;
        height: 50px;
        background-color: blanchedalmond;
      }
    }  
  
6.方法的编写  
  
    @function setSize($size){
      @return $size
    }
    $size:200px;
    #main{
      height: setSize($size)*2;
      width: setSize($size)*2;
    }