CSS预编译器三剑客(Sass、Less、Stylus)及PostCSS(AST、开发插件)
总结:
Sass、Less、Stylus比较
- 引入变量
- Less中的变量,在声明中使用时,如果出现多次赋值的情况,其会取最后一次赋值的值
- Sass/Stylus中的变量,如果出现多次赋值的情况,其会取声明前面最近的一次赋值的值。Sass/Stylus中提供了"不存在即赋值"的变量声明,使用"不存在即赋值"语法,编译器会检查前面是否定义了同名变量,如果没有定义,执行变量定义;如果前面定义了同名变量,则不会执行这个赋值的操作。
- mixin
- 在Less中,可以直接引入一个CSS的class作为mixin(这种方式非常不推荐), 同时也提供上面的能够传入参数的mixin;
- Sass比较中规中矩,通过@mixin和@include的方式定义和引入mixin;
- Stylus不需要显示的声明mixin,同时还提供透明mixin的功能,就像属性一样引入。
- 继承
- Sass/Stylus通过@extend关键字来继承样式,
- 而Less通过伪类的方式来继承
Postcss
PostCSS是一个使用JS插件来转换样式的工具
PostCSS的作用主要有lint css,支持CSS Next语法,自动添加前缀等等功能,通过插件,基本上可以覆盖CSS 预处理器的功能,同时实现多得多的预处理器实现不了的功能。
理解
- PostCSS不是CSS预处理器的替代品,虽然真的可以用PostCSS来替换掉。对于现有的项目,能够很容易的使用上PostCSS,无论你使用的是哪一个预处理器或者哪一个构建工具,都不会有太大的迁移成本。
- PostCSS的优势在于其丰富的插件生态,能够覆盖开发中的方方面面,我们又能够很容易的开发自己的插件。同时又因为PostCSS使用Javascript,Javascript本身及其繁荣的生态,为PostCSS提供了更加强大的能力。
- PostCSS中,最为大家所熟知的就是Autoprefix,同时Autoprefix在大量的预处理中使用着。PostCSS依靠其现代的架构设计,甩掉了历史包袱,利用其插件系统,能够更加优雅强化CSS的健壮性
架构流程
- 流程图
- 通过PostCSS将CSS转换成AST(抽象语法树),对应的是JavaScript对象;然后通过插件遍历AST,进行增加,删除,修改;最后再生成CSS文件,这就是整个流程,跟babel的架构非常相似。
开发插件
目标:如果我们检测到某个样式中有"color: red"这样一条样式规则,需要自动增加"background-color: red"这样一条规则。
步骤
PostCSS官方提供插件编写的模板,只需要将其下载下来:
git clone git@github.com:postcss/postcss-plugin-boilerplate.git
然后进入该文件夹的目录下,输入命令:
node start
这个时候会需要你输入一些信息,然后就会自动生成一个插件的模板文件夹,还是进入到这个对应的文件夹下,这个时候就能看到熟悉的package.json,index.js等文件,使用npm安装了依赖之后就可以在index.js文件中编写插件的逻辑了。
root.walkRules会遍历每一个CSS规则,可以通过rule.selector拿到每一组规则中的选择器,然后通过rule.walkDecls遍历每一组规则中的样式声明, 通过decl.prop,decl.value拿到样式声明中的属性和值。上面判断属性是否为’background-color’、值是否为’red’,如果满足条件则向规则中插入一条新的样式声明(这里为了简单,没有考虑是否已经存在background-color声明)。
插件编写完了,样板项目中还包含index.test.js来测试是否插件是否合理,下面是编写的index.test.js中的测试代码
这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。
1. CSS预编译器三剑客(Sass、Less、Stylus)
为什么会出现CSS预编译器这个东西呢?这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程能力较弱,代码复用性差。这些不足导致写出来的CSS维护性极差,同时包含大量重复性的代码;为了弥补这些不足之处,CSS预编译器应运而生。而谈到CSS预编译器,就离不开这三剑客Sass、Less、Stylus。历史上,最先登场的是Sass,因为出现最早,所以也是最完善的,有各种丰富的功能;Less的出现伴随着Bootstrap的流行,因此也获得大量用户;最后是Stylus,由TJ大神开发(敬大神),由于其简洁的语法,更像是一门编程语言,写起来非常Cool。所以下面我们来做一个简单的对比。
Less & SCSS:
.wrap {
display: block;
}
Sass:
.wrap
display: block
Stylus:
.wrap
display block
Sass最开始通过缩进,空格,换行的形式来控制层级关系,写过Python的同学一定不会陌生,后来又支持了传统的类CSS语法的Scss。Less中规中矩,使用CSS的风格,对新手非常友好,也利于现有项目的迁移。Stylus既可以使用Sass风格的语法来编写,也兼容CSS的风格。
这三者都支持变量的定义,而定义方式又各不相同:
Less:
@smallFont: 12px;
small {
font-size: @smallFont;
}
Sass:
$smallFont: 12px;
small {
font-size: $smallFont;
}
Stylus:
smallFont = 12px
small
font-size smallFont
需要注意的是:Stylus中声明的变量,如果变量名跟CSS中的字面值相同时,会覆盖CSS中的字面值。
有一个好玩的东西:相信大家平时都或多或少会接触到组件库,组件库的编写中会使用到CSS的预编译器来编写样式,通过外部传入变量的方式来提供自定义样式的功能,就像Ant.design和ElementUI那样。这就涉及到CSS变量的作用范围了,在这三种中预编译中,Sass/Stylus是相同的,Less是另一种情况,下面看实例:
Less:
@color: red;
.content-1 {
color