用SASS開發網頁(一){由CSS轉換到SASS}

寫過CSS的各位都知道,他是透過一行行來編輯,當有很多地方要做修正時就必須花很多時間檢查,解決方案就是使用前置處理器LESS或是SASS。
SASS是什麼?
真的會提升寫網頁的效率?
學習門檻高?
SASS有哪些是CSS無法取代?
如果有以上疑問,我們可以初步來探討一下這兩者的差異性

1.SASS是有結構的CSS,有程式邏輯概念和格式整理的CSS;可以解決當CSS越寫越多時,找CODE的不便。
2.可以有效將CSS模組化的方法,方便日後開發再利用;增加開發效率。
3.當使用共通樣式或者合併class的時候;減少重複打攏長無意義的class名稱或是子元素名稱,且較容易找尋。
4.用CSS3製作特效越來越普及,但太多瀏覽器前綴詞,導致使用上的不便利。
5.可使用繼承方式來進行樣式繼承;多人開發時更容易交接閱讀CSS樣式間的關聯性。
例如:以往的CSS寫法

.nav{
  position: relative;
}
.nav li{
  float: left;
}
.nav .btn{
  color: #000;
}

SASS寫法

.nav
  position: relative
  li
  float: left
  .btn
    color: #000

可以發現到結構階層更清楚明瞭,包含另個class .btn的繼承關係都歸屬到.nav底下,剛開始可能會不習慣沒有大括號和分號的狀態,但用一陣子後便會習慣(反而減少因為漏打產生的錯誤)。
另個案例:CSS最常使用的顏色定義

.box1 {
  background-color: #222;
}
.box2 {
  background-color: #333;
}
.box3 {
  background-color: #555;
}
.box4 {
  background-color: #777;
}
.box5 {
  background-color: #eee;
}

SASS使用變數加速開發:

$gray-darker:  #222
$gray-dark:    #333
$gray:         #555
$gray-light:   #777
$gray-lighter: #eee
.box1
  background-color: $gray-darker
.box2
  background-color: $gray-dark
.box3
  background-color: $gray
.box4
  background-color: $gray-light
.box5
  background-color: $gray-lighter

之後只要使用相同顏色的物件,都可以透過變數指定;假如需要修改也只需修改$宣告的部分即可。
簡單的介紹後有沒有感受到一些方便之處?之後我們再陸續探討,下回見。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *