CoffeeScript和Sass提高Web开发效率

如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, function, {} 要被您每天敲击若干遍。是否可以省掉这些重复的敲击。编写Css,先要一层一层的选到元素,然后开始写样式,如果要写下一层的样式,又要重复的选一次父层元素然后再到子层,Css是否可以嵌套呢。

下面是同样功能的CoffeeScript和JavaScript的代码对比:

26_132831_rohvcs1

同样功能的Sass代码和Css代码的对比:

2

是不是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讨论~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值