總論

sass 經(jīng)cass編譯器編譯成css。
sass 兼容了css語法。
sass 帶有變量，mixin，循環(huán)，簡單運(yùn)算，function，繼承，嵌套，等可編程公共。

極大地簡化了開發(fā)人員對樣式表的創(chuàng)建過程，使我們可以使用可編程思維實(shí)現(xiàn)css的創(chuàng)建。

sass 是前端開發(fā)一大利器，類似的可編程css還有l(wèi)ess。

sass可以做到哪些？

1. 變量

<!--使用以$開始的標(biāo)識符作為變量名。-->
$valule:#ccc;

sass的變量值可以是字符串，顏色，數(shù)值（可帶單位，可用于計(jì)算）

2. mixin（混合）

mixin 相當(dāng)于一個將一個代碼片段存儲在一個特殊的變量中，方便多處引用，以解決代碼重復(fù)書寫的問題。

// 定義
@mixin test{
    color:red;
}

body{
    // 調(diào)用
    @include test;
}

3. 繼承

使用@extend可以繼承某個選擇符下的樣式內(nèi)容

.box{
    color:red;
    border:1px solid #ccc;
    width:100px;
    height:100px;
}
.box-inner{
    @extend .box
    border:2px solid blue;
}

4. 循環(huán)

scss 可使用關(guān)鍵字@for @while @each 實(shí)現(xiàn)循環(huán)

$endValue:8;
@for $i from 1 through $endValue{
    .box-#{$i}{  // 可生成多個類
        color:blue;
        border:1px*$i solid #ccc  // border-width 計(jì)算得出
    }
}

scss還有許多復(fù)雜而高級的方法，此篇只是對基本方法進(jìn)行一個總結(jié)和介紹。
更多的高級方法的使用，還需要仔細(xì)閱讀scss相關(guān)資料深入學(xué)習(xí)。