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的一些有用特性:
- Lexical Scoping and Variable Safety
- If, Else, Unless, and Conditional Assignment
- The Existential Operator
- Classes, Inheritance, and Super
- Function binding
- Extended Regular Expressions
Sass: http://sass-lang.com/
Sass 的一些有用特性:
- Variables: 变量以
$
开始,它能定义 颜色,数字,或者文字。 - Nesting: 嵌套,将选择器嵌入到其他层级的选择器。
- Mixins: 混合类型,允许抽象出性质的共同点,然后命名并且加入到选择器中。
- Selector Inheritance: 继承,继承其它选择器的属性。
- Functions: 函数,支持简单的算术操作,如
+-×/
,及函数。如:将某颜色亮度增加10%
lighten(red, 10%)
。
This post is licensed under CC BY 4.0 by the author.