雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月.
坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心態, 可是真的在寫的時候發現真的還好, 而且也有編譯的軟體, 所以這些煩惱就不需要煩惱啦~非常建議各位來試試看!
雖然我實際運用不久, 還有很多強大功能尚未一一發掘, 可是就光基礎的東西就讓我佩服不已了(笑)
以下紀錄我的Sass使用心得:
1. 巢狀結構
以往寫CSS像是ul, li等等的要這樣寫, 要重寫一次很麻煩, 如果事後要找更麻煩:
|
1 2 3 |
; html-script: false ] ul { color: #000; } ul li { float: left; } |
但是Sass的巢狀結構可以這樣寫, 階層方面很清楚一目了然, 從Code上就可以知道li是在ul裡面的, 而且編譯出來的結果其實跟上面一樣, 不必擔心瀏覽器看不懂:
|
1 2 3 4 5 |
; html-script: false ] ul { color: #000; li { float: left; } } |
但是也不要太開心一次全部包進去喔:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
; html-script: false ] .header { margin: 0 auto; .main { width: 500px; .hi { background: #eee; ul { color: #000; li { float: left; } } } } } |
編譯結果會是這樣:
|
1 2 3 4 5 |
; html-script: false ].header { margin: 0 auto; } .header .main { width: 500px; } .header .main .hi { background: #eee; } .header .main .hi ul { color: #000; } .header .main .hi ul li { float: left; } |
因為瀏覽器的渲染方向是從最後一個元素開始往前找的, 包太多層出來的結果會造成運行變慢, 千萬恩湯阿恩湯~
2. 變數
只要在檔案上方設定變數, 底下的同樣設定都可以套用, 這樣要改也可以一次改完不用找半天找到眼睛打結:
|
1 2 3 |
; html-script: false ] $color: #666; p { color: $color; } |
3. @import
以前常常有CSS太多行或者是檔案太多導致管理不易等問題, 但現在使用Sass可以利用@import功能把背後眾多檔案合併編譯成一個檔案, 維護上容易(因為自己在修改的時候還是去找原本拆出的檔案), 也不用擔心程式連錯檔案或者一次全放進去導致request數增加等問題囉
那編譯時只要合併好的檔案, 其他檔案不想一起產出該怎辦呢?把不需要產出的檔案命名前面多加一個”_”即可.
4. mixin
mixin可以設定需要重複出現的樣式, 只要把常用樣式建立一個mixin, 在其他地方include進去, 如果有小小要修改的樣式可以在mixin底下重新寫一個樣式覆蓋掉.這樣不必在很多地方複製貼上, 當然修改的時候也是直接改mixin就行:
|
1 2 3 4 5 6 7 8 9 10 11 |
; html-script: false ] @mixin type { border: 1px solid #000; background: pink; color: black; } .test { @include type; color: #666; } |
以上是Sass的好用簡介, 單然還有很多還沒介紹到的, 希望大家一起來尋找~!!
若有誤也請指正, 謝謝.
本文同步發表於http://ithelp.ithome.com.tw/question/10139017