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开发效率相关推荐

学习前端开发，可提高Web开发效率的15类工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
提高系统开发效率的“银弹”——X-series可视化大规模应用开发工具集
子曰,知之为知之,不知为不知,是知也. 知道自己不知道也是一种知道,但作为开发人员,面对一个系统时,无论是开发新功能还是维护老系统,我们更多的是处在一种茫然无助,不知道如何下手,甚至不知道自己不知道的 ...
基于腾讯x5封源库，提高60%开发效率
目录介绍 01.前沿说明 1.1 案例展示效果 1.2 该库功能和优势 1.3 相关类介绍说明 02.如何使用 2.1 如何引入 2.2 最简单使用 2.3 常用api 2.4 使用建议 03.js调 ...
基于腾讯 x5 开源库，提高 webView 开发效率，大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放
YCWebView 项目地址:yangchong211/YCWebView 简介: 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本.该案例支持处理 js 的交 ...
基于腾讯x5开源库，提高webView开发效率
基于腾讯x5开源库,提高webView开发效率文章目录基于腾讯x5开源库,提高webView开发效率 01.前沿说明 1.1 案例展示效果 1.2 该库功能和优势 1.3 相关类介绍说明 02.如 ...
关于项目进度慢的思考----如何提高整体开发效率
关于项目进度慢的思考----如何提高整体开发效率 2010-06-21 23:42 by virus, 2137 visits, 网摘, 收藏, 编辑我们都是软件行业是世界所有的行业中,失败率最高的 ...
如何使用Arthas提高日常开发效率？
简介: 1. Arthas有什么功能,怎么用,请看:Arthas使用手册 2. Arthas命令比较复杂,一个帮助生成命令的IDEA插件:arthas idea plugin 使用文档 3. 基于Ar ...
提高 Linux 开发效率的 5 个工具
提高 Linux 开发效率的 5 个工具我们经常需要长时间地坐在电脑前做一项具体的工作只为能够优化工作流程.这包括选择和配置能让你最高效工作的工具.从长远来看,简单易学的工具并不总是好的,那些能够充 ...
提高软件开发效率的方法
一个开发任务下达以后,我们希望尽快的实现的,对软件开发工程师的要求是:多快好省多--单位时间产量高快--同样的产量所需的时间少好--质量高省--省钱,省时,省资源这四个目标中最主要的又是&q ...

CoffeeScript和Sass提高Web开发效率

CoffeeScript和Sass提高Web开发效率

CoffeeScript和Sass提高Web开发效率相关推荐

最新文章

热门文章