CoffeeScript和Sass提高Web開(kāi)發(fā)效率

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

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

同樣功能的Sass代碼和Css代碼的對(duì)比：

是不是CoffeeScript和Sass更加的簡(jiǎn)潔易懂，同時(shí)又省了很多代碼? CoffeeScript和Sass都采用了簡(jiǎn)潔的Ruby語(yǔ)法風(fēng)格，都是用代碼生成代碼，即用右邊的CoffeeScript代碼生成左邊的JavaScript代碼，用Sass/Scss代碼生成Css代碼。這兩個(gè)Library的作者都想用新的代碼方式來(lái)省去一些重復(fù)的，有些"鋪張"的代碼。
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: 變量以$開(kāi)始，它能定義 顏色，數(shù)字，或者文字。
2.? Nesting: 嵌套，將選擇器嵌入到其他層級(jí)的選擇器。
3.? Mixins: 混合類(lèi)型，允許抽象出性質(zhì)的共同點(diǎn)，然后命名并且加入到選擇器中。
4.? Selector Inheritance: 繼承，繼承其它選擇器的屬性。
5.? Functions: 函數(shù)，支持簡(jiǎn)單的算術(shù)操作，如+-×/，及函數(shù)。如：將某顏色亮度增加10%: lighten(red, 10%)。

歡迎大家在GCDN討論～～

posted @ 2011-06-27 11:22 葡萄城技術(shù)團(tuán)隊(duì) 閱讀(...) 評(píng)論(...) 編輯 收藏

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。