1.首先,什么是预处理器呢?
A:CSS(Cascading Style Sheet-级联样式表) 预处理器是一种用来为 CSS 增加一些编程特性的语言,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、函数、简单的程序逻辑等一些编程语言中的基本技巧,使得CSS 更为简洁,适应性更强,代码更直观等诸多好处。
2.三种css预处理器的对比
对比 | Less | Sass | Stylus |
---|---|---|---|
安装方式 | npm install -g less,即可被编译成.css文件 | 先安装ruby,再安装sass:gem install sass | npm install stylus |
声明变量 | 声明变量用『@』开头,其余等同 Sass 作用域:Less有全局变量与局部变量 | 声明变量必须是『$』开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开
变量需要写在字符串中时,必须写在#{}中 | 直接指定变量:font-size = 声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。但需要注意的是,如果用“@”符号来声明变量,Stylus会进行编译,但不会赋值给变量。就是说,Stylus 不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同 |
插值 | 无 | 无 | 通过使用{}字符包围表达式来插入值,其会变成标识符的一部分 vendor(prop, args) |
运算 | 组织数值型value。提供加减乘除运算。
| 提供加减乘除运算。
| 一元运算符 二元运算符 范围”..", "..." 指数:** 相等与关系运算 真假 逻辑运算 存在操作:in |
赋值方式 | 通过 | 与less一致 | Stylus 通过 |
作用域 | JS 一样,逐级查找,向上冒泡 | 三者最差,不存在全局变量的概念。也就是说在 Sass 中定义了相同名字的变量时你就要小变态了 | 完全等同 Less。Stylus 和 Sass 则更倾向于指令式 |
嵌套 |
| 在嵌套代码中,可以使用&引用父元素 a { | 雷同 |
继承 | 这个方面Less 表现的稍微弱一些,更像是混入写法 | 能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始,后面接被继承的选择器
| 父级引用:混合书写可以利用&继承
|
条件语句 | 无 |
|
|
循环语句 | 无 |
|
|
@import | Less 为@Import 扩展了语法 | 无 | 无 |
mixin | @mixin+@include | 直接调用 | 直接调用 |
实现方式 | 基于javascript,客户端 | 基于ruby,服务端 |