CoffeeScript和Sass提高Web開發效率

如果您是一位每天都要編寫JavaScript和Css的Web前端開發人員，可能您已經開始感覺到JavaScript的關鍵字 var, function, {} 要被您每天敲擊若干遍。是否可以省掉這些重復的敲擊。編寫Css，先要一層一層的選到元素，然后開始寫樣式，如果要寫下一層的樣式，又要重復的選一次父層元素然后再到子層，Css是否可以嵌套呢。

下面是同樣功能的CoffeeScript和JavaScript的代碼對比:

同樣功能的Sass代碼和Css代碼的對比：

是不是CoffeeScript和Sass更加的簡潔易懂，同時又省了很多代碼? CoffeeScript和Sass都采用了簡潔的Ruby語法風格，都是用代碼生成代碼，即用右邊的CoffeeScript代碼生成左邊的JavaScript代碼，用Sass/Scss代碼生成Css代碼。這兩個Library的作者都想用新的代碼方式來省去一些重復的，有些"鋪張"的代碼。
CoffeScript:
http://jashkenas.github.com/coffee-script/

CoffeeScript的一些有用特性:
1.? Lexical Scoping and Variable Safety
2.? If, Else, Unless, and Conditional Assignment
3.? The Existential Operator
4.? Classes, Inheritance, and Super
5.? Function binding
6.? Extended Regular Expressions

Sass:
http://sass-lang.com/

Sass 的一些有用特性:
1.? Variables: 變量以$開始，它能定義 顏色，數字，或者文字。
2.? Nesting: 嵌套，將選擇器嵌入到其他層級的選擇器。
3.? Mixins: 混合類型，允許抽象出性質的共同點，然后命名并且加入到選擇器中。
4.? Selector Inheritance: 繼承，繼承其它選擇器的屬性。
5.? Functions: 函數，支持簡單的算術操作，如+-×/，及函數。如：將某顏色亮度增加10%: lighten(red, 10%)。

歡迎大家在GCDN討論～～

posted @ 2011-06-27 11:22 葡萄城技術團隊 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的CoffeeScript和Sass提高Web开发效率的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。