和less一樣，sass也是一門css預(yù)處理語言，但是功能卻更強(qiáng)大。在寫sass前的準(zhǔn)備是ruby和sass的安裝。

安裝及編譯

• ruby安裝包傳送門（Windows）：https://pan.baidu.com/s/1pLyJTij
• 安裝教程傳送門：http://www.w3cplus.com/sassguide/install.html
• 編譯：
  首先創(chuàng)建一個(gè).scss文件（用來編寫sass的），舉例假設(shè)命名為demo.scss，在ruby下：

單一文件編譯

基本用法

• 變量
  sass中變量用$符號(hào)加上變量名稱：

$blue: blue;
$fontSize: 50px;
h1{
    color: $blue;
    font-size: $fontSize;
}

編譯過對(duì)應(yīng)的css：

h1 {
    color: blue;
    font-size: 50px; 
}

• 運(yùn)算
  sass中變量可以進(jìn)行運(yùn)算：

$fontSize: 50px;
h1{
   font-size: $fontSize + 20px;
}

編譯過對(duì)應(yīng)的css：

h1 {
   font-size: 70px; 
}

• 嵌套
  sass是支持選擇器嵌套的，邏輯更清晰：

div{
      h1{
          font-size: 70px; 
      }
}

編譯過對(duì)應(yīng)的css：

div h1 {
      font-size: 70px;
 }

在嵌套中，可以使用&來引用父元素，例如在運(yùn)用偽類時(shí)：

div{
      & : hover { color: red }
}

代碼重用

• 繼承
  sass可以讓選擇器能繼承另一個(gè)選擇器的代碼，如下，.box2想要繼承.box1的代碼，用@extend+選擇器進(jìn)行繼承：

.box1{
    width: 100px;
    height: 100px;
}
.box2{
    @extend .box1;
}

編譯過對(duì)應(yīng)的css：

.box1, .box2 {
    width: 100px;
    height: 100px; 
}

• 混合（Mixins）
  可以類比于js中的函數(shù)，sass中的混合以@mixin開頭，用@include調(diào)用，也可以進(jìn)行傳參：

@mixin radius($radius: 20px){
    border-radius: $radius;
}
.box1{
    width: 100px;
    height: 100px;
    @include radius();  //不傳參時(shí)使用默認(rèn)值20px
}
.box2{
    @extend .box1;
    @include radius(50px);  //傳參時(shí)使用參數(shù)50px
}

• 顏色函數(shù)
  sass中提供了一些內(nèi)置的顏色函數(shù)，darken($blue, 10%)表示比$blue深10%：

$blue: blue;
.box1{
    width: 100px;
    height: 100px;
    background-color: darken($blue, 10%);
}

除了darken，還有其他的：
*lighten($blue, 10%)
*darken($blue, 10%)
*grayscale($blue)
*complement($blue)