為什麼要用Sass

  • Prototype Hacker Hannah Lin #hannahpun
  • Jan 1
  • CSS

也許你曾經聽過Sass/Compass
但不懂他可以幹嘛,怎麼這麼多人在用?
“用過就回不去了” 是Sass屆的名言
在介紹之前,先想想你用Css曾經遇過的問題

 

1. 永遠只有一支 .css,完成一個專案通常會上千行,當你要修改東西時必須一直scroll來scroll去找.

2. 當客戶要求所有字都要變大時,你必須把上千行css看一遍然後把所有字級變大

3. 當你不是最一開始的開發者,主管請你修已離職員工的css,你會想撞牆壁,因為完全不懂前一位同事寫法邏輯

4. 當一個案子很急,需要2,3個人共同開發…恩 幾乎不可能 因為你們共用同一個css

5. 當你要控制同一區塊裡面內容,你必須要一直.header ul, .header ul li, .header a…..一直不斷複製.header….覺得很煩

6. css3必須加很多前綴詞,-webkit-, -moz-, -ms-, -o-很麻煩,難道不能寫一次就可以在各個瀏覽器就有一樣效果嗎?

7. 當設計跟你說 阿我覺得這個綠太深了,我想要淺一點,同樣你要再把上千行的css深綠改為淺綠

8. 要做背景圖時(background-image),你必須先去看這張圖長寬,然後設定width, height,一旦設計師改同張圖尺寸了,你就必須回過頭來改尺寸

9. sprite的做圖很不錯,但算那些圖片位置也太麻煩了吧

10. 若必須要做三個一模一樣網站,只是顏色不同.做完之後 設計師跟我說這三個網站圓角通通要改成直角,或還有其他微調…然後你程式碼開始變很亂

11. 就算有寫共同元件可以使用,但code太長,寫到下面忘了上面,回到上面忘記下面寫什麼

12. 我只要用bootstrap的grid,但必須把整包bootstrap include進來覺得程式碼變很肥

13. 每次做網站都要從頭開始,明明很多樣式都差不多,好希望寫好常用style就不用每次重寫了

14. 發現css重覆的style很多,我只能一直加重權重覆蓋,到最後變得好難管理

15. 做responsive的時候,不知道怎樣寫更好管理

arial

綜合以上,一個專案css經過很多次改來改去,程式碼變超亂,只好偷偷命名為mike.css讓人以為是同事寫的

 

寫css時,其實真的非常難管理,相信大家都有經驗過XD
Sass/Compass解決了以上所有問題,用更程式的角度幫你撰寫css

例如 我想做30種button 每個字跟按鈕顏色都不同,Sass可以用迴圈幫你三行解決
純Css呢?你必須寫N行….

他不僅僅提供提供迴圈,還有變數,function,mixin, extend….Compass還有多到不行的library可以供你使用

 

假如你想偷懶,減少重覆跟更有效率的管理你的Css,歡迎加入Sass/Compass行列

我們也有提供相關課程,歡迎你來報名:)

Sass + Compass開發初階

Sass + Compass開發進階