什么是SASS？
為了減短開(kāi)發(fā)網(wǎng)站建設(shè)CSS的所需時(shí)間，因此Ruby（一種程式語(yǔ)言）開(kāi)發(fā)出了CSS程式化框架SCSS、SASS。兩者皆屬于SASS，差別在副檔名與撰寫(xiě)方式的不同。SASS是原生的SASS語(yǔ)法，最大的特征是以縮排取代了CSS的大括弧，SCSS則是后來(lái)衍生出來(lái)的，在結(jié)構(gòu)上與CSS十分相似，因此對(duì)于本來(lái)就習(xí)慣寫(xiě)CSS的人來(lái)說(shuō)，SCSS會(huì)比較容易上手。
?
安裝SASS
1.到Ruby官網(wǎng)下載最新的Ruby程式。http://rubyinstaller.org/downloads/
開(kāi)啟「Start Command Prompt with Ruby」視窗并執(zhí)行。
2.按「開(kāi)始」－＞「執(zhí)行」輸入「cmd」開(kāi)啟命令提示字元。
3. 輸入「gem install sass」安裝SASS。
安裝之后可輸入sass-v 確認(rèn)是否安裝成功。
SASS的特色
1.變數(shù)(Varibles)
在SASS中新增變數(shù)前需加符號(hào)＂＄＂
可以整合網(wǎng)站最常使用的寬、高、顏色、字型等等，預(yù)先設(shè)好，需要時(shí)就能拿出來(lái)使用。
2.巢狀(Nesting)
透過(guò)巢狀式結(jié)構(gòu)，父子元素的命名關(guān)系一目了然，易讀性增高，減少CSS的編輯時(shí)間。
3.函式{Mixins)
可以省去許多重復(fù)的CSS文字，新增函式前需加"="做為宣告，函式使用前則需加"+"號(hào)即可取用。
4.繼承(Extend)
SASS里的繼承與CSS的繼承差距不大，也就是能沿用之前所撰寫(xiě)的CSS，標(biāo)簽前加"@extend"便可沿用。
5.運(yùn)算符(Operators)
在SASS里可直接做加減乘除的計(jì)算(注意單位需相同)
：
6.導(dǎo)入(Import)
當(dāng)需要使用其他SASS文件時(shí)，只要將文件導(dǎo)入"@import"進(jìn)來(lái)即可。
需注意的是導(dǎo)入的文件前需加下底線"_"。
如例子master.sass需寫(xiě)成_master.sass
若能靈活應(yīng)用SASS的話，將會(huì)大幅度降低網(wǎng)站建設(shè)CSS的撰寫(xiě)時(shí)間，并由于CSS行數(shù)減少的關(guān)系，使得后續(xù)的維護(hù)與修改更加容易，也能夠使網(wǎng)頁(yè)讀取速度更快。缺點(diǎn)在于一開(kāi)始繁復(fù)的安裝過(guò)程，并需要先開(kāi)啟編輯器生成CSS才能看到撰寫(xiě)的網(wǎng)頁(yè)內(nèi)容，且需花時(shí)間學(xué)習(xí)新的語(yǔ)法，但若是習(xí)慣之后，確實(shí)能減少許多不必要的時(shí)間。想提升工作效率嗎？學(xué)習(xí)SASS會(huì)是你的好選擇。
