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%)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Angular&服务

Angular2 组件(页面)之间如何传值

在Angular 2中,数据和事件变化检测从上到下发生从<b>父级到子级。</b>

83450
来自专栏飞雪无情的博客

Go语言实战笔记(二十六)| Go unsafe 包之内存布局

unsafe,顾名思义,是不安全的,Go定义这个包名也是这个意思,让我们尽可能的不要使用它,如果你使用它,看到了这个名字,也会想到尽可能的不要使用它,或者更小心...

8720
来自专栏源码之家

EXCEL取消合并且等于原合并值

16540
来自专栏程序生活

括号配对问题描述输入输出样例输入样例输出解析代码实现运行结果参考链接

括号配对问题-题目链接 描述 现在,有一行括号序列,请你检查这行括号是否配对。 输入 第一行输入一个数N(0<N<=100),表示有N组测试数据。后面的N行输入...

34350
来自专栏技术墨客

React学习(9)—— 高阶应用:虚拟Dom差异比对算法

React提供了一系列声明性的API接口,因此在使用时不必担心每次库的更新会修改API接口。这样可以降低编写应用的复杂度,但是带来的问题是无法很好的理解Reac...

10420
来自专栏技术墨客

React 虚拟Dom渲染算法

React提供了一系列声明性的API接口,因此在使用时不必担心每次库的更新会修改API接口。这样可以降低编写应用的复杂度,但是带来的问题是无法很好的理解Reac...

13450
来自专栏熊二哥

Javascript快速入门(上篇)

Javascript的熟练之路,小弟来了。 ? JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,...

20950
来自专栏LanceToBigData

SpringBoot(四)之thymeleaf的使用

这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎。...

661100
来自专栏python3

tkinter -- Spinbox

只是创建了一个 Spinbox,其它的什么也做不了,与 Scale 不同,Scale 使用缺省值就可以控制 值的改变

11230
来自专栏纯洁的微笑

springboot(四):thymeleaf使用详解

在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf...

833100

扫码关注云+社区

领取腾讯云代金券