總論
sass 經(jīng)cass編譯器編譯成css馁启。
sass 兼容了css語(yǔ)法。
sass 帶有變量芍秆，mixin惯疙，循環(huán)，簡(jiǎn)單運(yùn)算妖啥，function霉颠，繼承，嵌套荆虱，等可編程公共蒿偎。
極大地簡(jiǎn)化了開發(fā)人員對(duì)樣式表的創(chuàng)建過(guò)程，使我們可以使用可編程思維實(shí)現(xiàn)css的創(chuàng)建怀读。
sass 是前端開發(fā)一大利器诉位，類似的可編程css還有l(wèi)ess。
sass可以做到哪些菜枷？
1. 變量
<!--使用以$開始的標(biāo)識(shí)符作為變量名苍糠。-->
$valule:#ccc;
sass的變量值可以是字符串，顏色啤誊，數(shù)值（可帶單位岳瞭，可用于計(jì)算）
2. mixin（混合）
mixin 相當(dāng)于一個(gè)將一個(gè)代碼片段存儲(chǔ)在一個(gè)特殊的變量中拥娄，方便多處引用，以解決代碼重復(fù)書寫的問(wèn)題瞳筏。
// 定義
@mixin test{
color:red;
}
body{
// 調(diào)用
@include test;
}
3. 繼承
使用@extend可以繼承某個(gè)選擇符下的樣式內(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}{ // 可生成多個(gè)類
color:blue;
border:1px*$i solid #ccc // border-width 計(jì)算得出
}
}
scss還有許多復(fù)雜而高級(jí)的方法稚瘾，此篇只是對(duì)基本方法進(jìn)行一個(gè)總結(jié)和介紹。
更多的高級(jí)方法的使用乏矾，還需要仔細(xì)閱讀scss相關(guān)資料深入學(xué)習(xí)。
