前言
? ? ? ?之前一直聽說過sass和less悠菜。以為自己沒用過紫新，其實曾經(jīng)的時候還是用過sass的。只不過是在別人搭好的結構上直接使用的以至于印象不深刻李剖。然后也糾結過用sass還是less。兩個框架在語法上大體上是相同的囤耳，主要的不同就是實現(xiàn)方式篙顺。less是基于javascript，而sass是基于服務器的充择。前人的經(jīng)驗可以給我們提供更好的選擇德玫，由于sass在github上的評分比較高，所以我們選擇了sass作為我們css端的開發(fā)工具椎麦。
安裝 sass
一宰僧、安裝ruby（由于我們現(xiàn)在用的是gulp，所以就沒必要安裝ruby）
? ? ? 因為sass依賴于ruby環(huán)境观挎，所以裝sass之前先確認裝了ruby琴儿。官網(wǎng)下載ruby。在安裝的時候嘁捷，請勾選Add Ruby executables to your PATH這個選項造成，添加環(huán)境變量，否則以后使用編譯軟件時會提示找不到ruby環(huán)境雄嚣。
二晒屎、安裝sass
? ? ? ?安裝完ruby之后，在開始菜單中缓升，找到剛才我們安裝的ruby鼓鲁，打開Start Command Prompt with Ruby
然后直接在命令行中輸入gem install sass按回車鍵確認。等待一段時間后顯示安裝成功
使用 sass
? ? ? ? sass文件就是普通的文本文件港谊，里面可以直接使用css語法骇吭。文件后綴名是.scss，意思為Sassy CSS歧寺。
? ? ? ? 正常情況下瀏覽器是不能解析scss文件的绵跷，所以要將.scss文件轉為css代碼（假設文件名為test）
? ? ? ? 如果要將顯示結果保存成文件膘螟，后面則要跟一個.css的文件
在項目中應用
一、路徑設計：全局文件為sass.scss碾局，里面引用模塊荆残。其中public-vaiable文件里面為放置的公共變量，（必須加載在所有模塊的上面净当，否則在它上面的引用找不到變量就會報錯）
二内斯、嵌套：SASS允許選擇器嵌套，好處的話我覺得看起來更加清晰像啼，并且不用寫一長串的選擇器俘闯。
三、變量的運用
1忽冻、設置常用的字號：由于最近的wap端的像素單位用的是rem真朗，然后設置了一些常用的字號從12-20。運用的時候直接寫font-size: $size14;就好僧诚。
2遮婶、設置通用顏色：由于網(wǎng)站的顏色要統(tǒng)一化，例如黃色就是一種黃湖笨，不能雜亂旗扑。所以運用顏色變量能更好的體現(xiàn)，并且更方便維護慈省。下圖中如果后期黃色的色值要變動一下臀防，那么改了這里，所有的就都生效边败。在搶單的頁面中現(xiàn)在用到的有三種灰色袱衷，$gray文字的淺灰色，$dark-gray為文字的深灰色笑窜，$line-gray為橫線的灰色祟昭。
3、瀏覽器前綴：由于css3的樣式好多并不是被瀏覽器完全兼容怖侦，所以必須帶上其瀏覽器所專屬的前綴才能夠被識別篡悟。目前所要帶上的前綴有-webiktih和-o和-moz和-ms。這樣一個樣式就要寫四遍匾寝，很麻煩搬葬。而sass的變量能幫我們很好的解決這個麻煩。如下圖以圓角的前綴舉例艳悔，@mixin為sass的混合聲明用法急凰，可以傳遞參數(shù)，參數(shù)名以$符號開始，多個要用分號隔開抡锈。rounded是我自己給起的名稱疾忍，括號里面為變量。
調用的時候要用@include 引入 后面加名稱床三，括號里指定參數(shù)一罩。如果想用默認參數(shù)，就不需要指定直接寫@include rounded()就可以
END
? ? ? ? ?現(xiàn)在在項目中運用的點就以上這些撇簿，當然sass不只有這些功能聂渊。實際中用到新的功能我會及時更新到這篇文章的應用模塊里面。從目前來說四瘫，運用sass對我們確實是有益處的汉嗽，而目前遇到的坑就是在路徑的那里，必須記得把公共變量的文件寫在文檔流的最上面找蜜。否則會調用不到饼暑，然后gulp也會報錯并停止運行。
