scss

1、 scss是css的擴(kuò)展語言
2、注釋：/* */（能被編譯出來）和//（不能被編譯出來）
3、變量：用$開頭，用;結(jié)尾，值后加!default，指定值為默認(rèn)值
4、嵌套：選擇器嵌套和屬性嵌套
5、@at-root跳出嵌套
6、&指父標(biāo)簽
7、宏：sass中使用@mixin聲明宏，可以傳遞參數(shù)，參數(shù)名以$符號開始，多個參數(shù)以逗號分開，也可以給參數(shù)設(shè)置默認(rèn)值。聲明的@mixin通過@include調(diào)用。
8、繼承：@extend，后面跟要繼承的選擇器。
9、函數(shù)：@function 函數(shù)名(參數(shù)){ @return 表達(dá)式;}
10、運(yùn)算：可以對數(shù)值型的Value(如：數(shù)字、顏色、變量等)進(jìn)行加減乘除四則運(yùn)算。運(yùn)算符前后請留一個空格，不然會出錯。
11、條件判斷：@if 判斷表達(dá)式 { } @else if 判斷表達(dá)式 { } @else { }
12、三目運(yùn)算：if($condition, $if_true, $if_false)
13、for循環(huán)：for循環(huán)有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結(jié)束值，這兩個的區(qū)別是關(guān)鍵字through表示包括end這個數(shù)，而to則不包括end這個數(shù)。
14、each循環(huán)：@each $var in <list or map> { }

compass

1、compass是sass/scss的工具庫
2、安裝命令：gem install compass
3、創(chuàng)建compass項(xiàng)目：compass create myproject
4、scss編譯成css：compass compile
5、scss編譯成min.css：compass compile --output-style compressed
6、強(qiáng)制編譯：compass compile --force
7、自動編譯：compass watch
8、compass模塊：css3、reset（重置）、layout（布局）、typography（版式）和utilities

gulp

gulp是前端css、js編譯、合并、壓縮等自動化工具，比grunt好用。