首頁?>?知識?資訊?>?SASS--加速網(wǎng)頁設(shè)計CSS撰寫的利器?>?正文

SASS--加速網(wǎng)頁設(shè)計CSS撰寫的利器

2016/12/20 0:00:00 · 稿源:傳誠信

什么是SASS?

為了減短開發(fā)網(wǎng)站建設(shè)CSS的所需時間,因此Ruby(一種程式語言)開發(fā)出了CSS程式化框架SCSS、SASS。兩者皆屬于SASS,差別在副檔名與撰寫方式的不同。SASS是原生的SASS語法,最大的特征是以縮排取代了CSS的大括弧,SCSS則是后來衍生出來的,在結(jié)構(gòu)上與CSS十分相似,因此對于本來就習(xí)慣寫CSS的人來說,SCSS會比較容易上手。

?SASS--加速網(wǎng)頁設(shè)計CSS撰寫的利器

安裝SASS

1.到Ruby官網(wǎng)下載最新的Ruby程式。http://rubyinstaller.org/downloads/

開啟「Start Command Prompt with Ruby」視窗并執(zhí)行。

2.按「開始」->「執(zhí)行」輸入「cmd」開啟命令提示字元。

3. 輸入「gem install sass」安裝SASS。

安裝之后可輸入sass-v 確認是否安裝成功。

SASS的特色

1.變數(shù)(Varibles)

在SASS中新增變數(shù)前需加符號"$"

可以整合網(wǎng)站最常使用的寬、高、顏色、字型等等,預(yù)先設(shè)好,需要時就能拿出來使用。

1.jpg

2.巢狀(Nesting)

透過巢狀式結(jié)構(gòu),父子元素的命名關(guān)系一目了然,易讀性增高,減少CSS的編輯時間。

1.jpg

3.函式{Mixins)

可以省去許多重復(fù)的CSS文字,新增函式前需加"="做為宣告,函式使用前則需加"+"號即可取用。

1.jpg

4.繼承(Extend)

SASS里的繼承與CSS的繼承差距不大,也就是能沿用之前所撰寫的CSS,標(biāo)簽前加"@extend"便可沿用。

1.jpg

5.運算符(Operators)

在SASS里可直接做加減乘除的計算(注意單位需相同)

1.jpg

6.導(dǎo)入(Import)

當(dāng)需要使用其他SASS文件時,只要將文件導(dǎo)入"@import"進來即可。

需注意的是導(dǎo)入的文件前需加下底線"_"。

如例子master.sass需寫成_master.sass

1.jpg

若能靈活應(yīng)用SASS的話,將會大幅度降低網(wǎng)站建設(shè)CSS的撰寫時間,并由于CSS行數(shù)減少的關(guān)系,使得后續(xù)的維護與修改更加容易,也能夠使網(wǎng)頁讀取速度更快。缺點在于一開始繁復(fù)的安裝過程,并需要先開啟編輯器生成CSS才能看到撰寫的網(wǎng)頁內(nèi)容,且需花時間學(xué)習(xí)新的語法,但若是習(xí)慣之后,確實能減少許多不必要的時間。想提升工作效率嗎?學(xué)習(xí)SASS會是你的好選擇。



  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354