Quickly Sass(1)-少動點兒手:Sass使用心得

雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月.
坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心態, 可是真的在寫的時候發現真的還好, 而且也有編譯的軟體, 所以這些煩惱就不需要煩惱啦~非常建議各位來試試看!

雖然我實際運用不久, 還有很多強大功能尚未一一發掘, 可是就光基礎的東西就讓我佩服不已了(笑)
以下紀錄我的Sass使用心得:

1. 巢狀結構
以往寫CSS像是ul, li等等的要這樣寫, 要重寫一次很麻煩, 如果事後要找更麻煩:

但是Sass的巢狀結構可以這樣寫, 階層方面很清楚一目了然, 從Code上就可以知道li是在ul裡面的, 而且編譯出來的結果其實跟上面一樣, 不必擔心瀏覽器看不懂:

但是也不要太開心一次全部包進去喔:

編譯結果會是這樣:

因為瀏覽器的渲染方向是從最後一個元素開始往前找的, 包太多層出來的結果會造成運行變慢, 千萬恩湯阿恩湯~

2. 變數
只要在檔案上方設定變數, 底下的同樣設定都可以套用, 這樣要改也可以一次改完不用找半天找到眼睛打結:

3. @import
以前常常有CSS太多行或者是檔案太多導致管理不易等問題, 但現在使用Sass可以利用@import功能把背後眾多檔案合併編譯成一個檔案, 維護上容易(因為自己在修改的時候還是去找原本拆出的檔案), 也不用擔心程式連錯檔案或者一次全放進去導致request數增加等問題囉
那編譯時只要合併好的檔案, 其他檔案不想一起產出該怎辦呢?把不需要產出的檔案命名前面多加一個”_”即可.

4. mixin
mixin可以設定需要重複出現的樣式, 只要把常用樣式建立一個mixin, 在其他地方include進去, 如果有小小要修改的樣式可以在mixin底下重新寫一個樣式覆蓋掉.這樣不必在很多地方複製貼上, 當然修改的時候也是直接改mixin就行:

以上是Sass的好用簡介, 單然還有很多還沒介紹到的, 希望大家一起來尋找~!!
若有誤也請指正, 謝謝.
本文同步發表於http://ithelp.ithome.com.tw/question/10139017

發佈留言

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

Time limit is exhausted. Please reload the CAPTCHA.