2012-07-23

CSS3 的 SASS 和 LESS 是什麼 ?

隨著 HTML5 +CSS3 + Javascript 的應用和開發方式越來越普及,改善和協助 HTML5、CSS3 、Javascript 的開發工具也就越來越多, 在Javascript 方面,阿舍之前有介紹過 CoffeeScriptJSX 這二種經過編譯可以產出更有效率的 Javascript 程式碼的程式語言,而今天阿舍要介紹的 SASS 和 LESS,其實,在功能上和 CoffeeScript 及 JSX 是類同的哩 !


Sass 的全名是「Syntactically Awesome Stylesheets」,而 LESS 就叫做「LESS」,並不是一個縮寫字,這二種語言 ( meta-languahe ) 都提供了許多 CSS 本身所沒有的功能,像是變數、可繼承類別(Mixin)、巢式迴圈 (Nesting)、運算式和函式等,所以,比起用標準的 CSS3 寫法來撰寫網站的 StyleSheet,採用Sass 和 LESS 來開發的話,可以讓 CSS 的開發者以用更有效率的方式來撰寫並產生更有效率的 CSS 程式碼哩 !

另外,由於 LESS 是用 Javascript 撰寫的,所以,在 Server 端需有 node.js 才能進行編輯的動作,但是,也因為是採用 Javascript 所撰寫的,因此, LESS 也可在不編譯的情況下,就可以直接用 LESS 寫出的程式碼來執行,只是,要在網頁上多加載 less.js 程式檔,而 Sass 則是採用 Ruby 所撰寫的,因此,要先安裝 Ruby 才能使用,並且,要先把用 Sass 撰寫的程式碼編譯成 CSS 程式碼後,才能在網頁上執行,目前,還沒有像 LESS 一樣,有支援用戶端哩 !

阿舍個人覺得是應該要利用一下像 Sass 和 LESS 來簡化和提高 CSS 的撰寫工作,因為阿舍每次碰到 CSS 都會有點茫茫然哩 ! 透過 Sass 和 LESS 的幫忙,會比較像是在寫程式,應該會讓阿舍多喜歡 CSS 一點哩 ! 至於要選那一套呢 ? 阿舍覺得,如果你已經有在用 node.js 或 Javascript 來開發東西的話,就選 LESS 吧 ! 然後,如果不習慣 LESS 要用 node.js 來編譯的話,請選 Sass 會單純些的,習慣先編譯再執行的話,也請選 Sass,再不然,就去瞭解一下二套的語法架構,然後,選一個自己容易上手的用哩 !

推薦閱讀


有疑問? 問題還是沒解決嗎? 歡迎下方留言提問和討論 😁

沒有留言 :

張貼留言

歡迎留言提問和討論 .... 😁