CoffeeScript和Sass提高Web开发效率

简介: 如果您是一位每天都要编写JavaScript和Css的Web前端开发人员,可能您已经开始感觉到JavaScript的关键字 var, function, {} 要被您每天敲击若干遍。是否可以省掉这些重复的敲击。

如果您是一位每天都要编写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讨论~~

相关文章
|
7月前
|
资源调度 JavaScript 前端开发
探索Babel:现代JavaScript开发中的编译利器
Babel是一个流行的JavaScript编译工具,用于将新的ECMAScript标准(如ES6、ES7等)转换为向后兼容的JavaScript版本,以便在不同浏览器和环境中运行。它在现代JavaScript开发中扮演着关键角色,帮助开发者编写可读性强、高效且兼容性良好的代码。在本博客中,我们将深入研究Babel的核心概念、配置、插件和预设,以帮助您更好地了解这个强大的工具。
35 0
|
9天前
|
存储 前端开发 JavaScript
Sass:提升CSS开发效率的利器
Sass:提升CSS开发效率的利器
13 0
|
3月前
|
缓存 前端开发 JavaScript
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
|
3月前
|
Web App开发 前端开发 JavaScript
拯救浏览器兼容性:Babel是前端开发的必备神器(二)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
3月前
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性:Babel是前端开发的必备神器(一)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
8月前
|
JavaScript 程序员
灵活运用JS开发技巧(一)
灵活运用JS开发技巧
38 0
|
8月前
|
JavaScript
灵活运用JS开发技巧(二)
灵活运用JS开发技巧
46 0
|
10月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之Sass
Sass是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
109 1
|
10月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之PostCSS
PostCSS是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
107 3
|
10月前
|
JavaScript 前端开发
计算机技术|前端自动化构建工具Gulp.js
计算机技术|前端自动化构建工具Gulp.js
53 0