CSS预处理 _ Less 和 Sass

105 阅读1分钟

CSS 预处理器 —— 一个能让你通过预处理器独有的语法生成CSS的程序

主流的预处理器有 Sass, Less, Stylus

Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。

**Sass:**是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

Sass 与 Scss:Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

less 和 sass 的区别

1 实现方式不同,Less 基于JavaScript,在客户端处理,Sass基于Ruby,在服务端处理

2 变量上,Less声明使用变量用@,Sass使用$

3 Sass可以使用if,while,for,each进行循环遍历

4 Sass和Less 中不同的嵌套方式

less 和 sass 的共同点

1 参数混入

2 嵌套规则

3 混入,Mixins

4 运算

5 颜色功能

6 作用域,局部修改样式

7 JavaScript赋值

8 名字空间 namespace