蓝戒的博客


前端汪PostCSS知多少?

写在前面

近年前端知识技术更新迭代加速,作为一名前端汪,你是否停留在刀耕火种的时代?让我们带着极客的精神去发现更好的,更优雅的编码之旅吧!兵欲善其事必先利其器,选择一个好的工具,认识它,了解它,用它更好的为我们解决问题。废话不多说,下面我们一起进入css的新世界PostCSS。

postcss

一. PostCSS是什么?

1. 初识PostCSS

PostCSS在以惊人的速度发展,而且越来越受人欢迎。越来越多的人开始在了解它,使用它。因为他们意识到,在项目中使用PostCSS让他们意识到了眼前一亮。

postcss
2014年总共不到140万的下载量,但从2015年1月份到6月份已经超过380万个下载。

Autoprefixer是PostCSS中最流行的插件,其中Google、Shopify、Twitter、Bootstrap和Codepen都在使用这个插件。Wordpress也使用Autoprefixer插件,而且还使用RTLCSS插件。Alibaba使用了几个PostCSS插件,以及也参加PostCSS的开发。

除此之外,Mark Otto也谈到将在Bootstrap v5中引入PostCSS:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.——@Mark Otto

PostCSS刚刚被CodePen.io引用,可以通过CSS设置中设置:

postcssoncodepen
2. PostCSS自身定义

最好的定义来自于PostCSS自身项目在github上的描述:

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

简而言之,PostCSS是CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。
本质上是没有很制PostCSS插件操纵CSS,也就是说它可以适用于任何CSS。只要你能想到的,你都可以编写一个PostCSS插件,让它来转成CSS。
PostCSS插件可以像预处理器,它们可以优化和autoprefix代码;可以添加未来语法;可以添加变量和逻辑;可以提供完整的网格系统;可以提供编码的快捷方式......还有很多很多。

3. PostCSS的简要原理

PostCSS自身只包括css分析器,css节点树API,source map生成器以及css节点树拼接器。
css的组成单元是一条一条的样式规则(rule),每一条样式规则又包含一个或多个属性&值的定义。所以,PostCSS的执行过程是,先css分析器读取css字符内容,得到一个完整的节点树,接下来,对该节点树进行一系列转换操作(基于节点树API的插件),最后,由css节点树拼接器将转换后的节点树重新组成css字符。期间可生成source map表明转换前后的字符对应关系:

cssmap

4.PostCSS的模块化

如果Sass等预编译器是新定义了一种模板语言,然后将其转化为css的话,PostCSS则是更纯粹地对css本身做转换。
回想一下你是如何学习使用css预编译器的:了解到有这样一种可以转化为css的语言,它有很多特性,变量、嵌套、继承等等,每一种特性都通过一定语法实现。大概就像是递给你一个已经封装好的工具箱(量产型?),你可以在里面找有用的东西。
那PostCSS是怎样呢?PostCSS就像只递给你一个盒子,但告诉你你可以从旁边的陈列柜取走自己想要的工具放进盒子打包带走。如果你觉得陈列柜里的不够好,PostCSS还可以帮你打造你自己的工具。所以,使用PostCSS,你可以仅取所需。
这就是PostCSS的模块化(modular)风格。它作为一个css转换工具,自身很小,其所有的转换功能都是插件,因此可以个性化配置。

5.PostCSS插件

所有插件都可以在PostCSS的主页中查询到,进入PostCSS的主页。

PostCSS最有名的插件是Autoprefixer。如名所示,可以自动为你添加浏览器私有前缀。它的添加值会参考Can I Use及你设定的浏览器支持范围,因此相当可靠。下面是一个示例(以我设定的浏览器支持范围):
编译前:

.container{
display: flex;
}

编译后:

.container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

它有很多不同的插件,这也是让PostCSS发光之处。当你看到PostCSS在GitHub上的可用插件列表,你会发现其具有各式各样的功能。

这些插件允许你使用新语法、颜色函数、conic-gradient、自定义属性、自定义选择器、媒体查询的别名以及更多。

还有备用插件来创建传统的语法,比如将十六制颜色换成rgba()颜色、给IE8的opacity添加滤镜,给IE8推出伪元素选择器,快速将px转换成rem等等。

还可以扩展插件,包括添加变量、mixin、条件、循环、BEM和SUIT类名等等。

选择颜色的管理插件,允许颜色从一种格式转换到另一种格式,修改颜色的alpha值,结合色彩,生成更友好的配色方案等等。

有网格系统,优化工具,缩写以及分析报告的插件等等。
CSSNext, 可以看到下一代CSS开始支持变量了,这是否意味着'Sass'、'Less'不再重要了? 更多方法法可访问:http://cssnext.io/features/
Autoprefixer, 知名度很高的PostCSS插件,支持Gulp、Webpack、Grunt、Compass等,了解更多可访问: https://github.com/postcss/autoprefixer
CSS Grace, 国内大神写的实现了大部分常用的 IE Hack 的插件, 中文文档: https://github.com/cssdream/cssgrace/blob/master/README-zh.md

6.关于 PostCSS的误解

试图保持 PostCSS 是(或应该是)一个与“前处理器”Sass 和 Less 相对的“后处理器”的想法定是被误导了的。
不管你是怎样定义“后处理器”和“前处理器”的,一定会有 PostCSS 插件既是”前处理器“也是”后处理器“。依据大多数的定义,Autoprefixer 是一个标志性的"后处理器“;但是也存在着像 postcss-each,这类正是由”前处理器“组成的插件。
也有一些插件压根就不会转换你的 CSS,比方像 styleint、postcss-bem-linter 和 list-selectors。

试图把 “PostCSS” 绑定到特定的语法扩展或者转换是一种误解
PostCSS 是底层模块,有助于其他工具的创建;没有那些高层工具(插件)的限制。
所以 PostCSS 并不再是 “关于” 允许你编写未来的 CSS(语法和功能规范草案),而是 “关于” 提供循环,条件和其他类似 Sass 的特性。有一些独立的插件可以同时实现这两者,或者是一些插件包也可以实现这两个功能 (cssnext 和 precss);但是这些都不足以代表 PostCSS。

Autoprefixer插件成功的导致了大家对PostCSS的一个普遍看法:PostCSS是用来清理CSS、优化速度和处理跨浏览器兼容性。但这也仅是PostCSS一小部分。PostCSS最引人注目之处在于它不局限于任何一种类型功能,它是完全可以定制的,可配置的,可以说功能是无限的。

7. 性能:快3倍的速度

PostCSS宣称,由JavaScript编写的PostCSS比C++编写的libsass(Sass原本是Ruby编写的,但后来出了C++的引擎,也就是libsass,它更快)还要快3倍。

PostCSS测试速度很快,其有两个原因:其一你只需要加载需要的插件;其二它是运行在JavaScript上。

二. PostCSS能做什么?

1. 运用PostCSS 的特性解决问题

在使用 PostCSS 的时候,也提醒了我 CSS 是用来解决问题的。所有的问题都有许多种解决问题的方式。也许我们在选择解决方式的同时,也被诸多的解决方案所限制,甚至在解决问题的同时又制造了新的问题。

当人们认为他们是在批评“PostCSS”时,他们可能是在批评一些特定的插件,或插件包,或是特定方式使用的特定插件。
批评很好,但是不要欺骗自己不去理会其他基于 PostCSS 的工具,那样会让你以错误的方式错过那些工具。

PostCSS 已经被许多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。

PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。

PostCSS 可以作为预处理器使用,类似:Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具,比之前那些快3-30 倍,而且功能更强大。

PostCSS 包括 CSS 解析器,CSS 节点树 API,一个源映射生成器和一个节点树 stringifier。

代码示例:

:root {
--mainColor: #ffbbaaff;
}
@custom-media --mobile (width <= 640px);
@custom-selector --heading h1, h2, h3, h4, h5, h6;
.post-article :--heading {
color: color( var(--mainColor) blackness(+20%) );
}
@media (--mobile) {
.post-article :--heading {
margin-top: 0;
}
}

2.像使用CSS一样使用PostCSS

大多数PostCSS插件不需要使用自定义的语法,其实它就是典型的预处理器。相反,它们可以应用常规的CSS语法。这也意味着,你可以使用PostCSS就像是使用CSS一样。比如说,你要完成一个前端框架,你完全可以使用别人项目中的文件,例如Normalize.css文件。

这也意味着,你不需要固定使用一个特殊的预处理器,比如说Stylus、Sass或LESS,因为你总是可以应用PostCSS编译后的CSS。例如,你使用Sass编写的Foundation,完全可以使用PostCSS的优化和未来语法的插件生成新的CSS文件。

3.可以创建任何自己想要的插件

PostCSS是用JavaScript编写的插件,这样只要能编写JavaScript的就可以创建一个自己想要的插件,达到自己的目的。值得庆幸的是,就算你不是专业的JavaScript开发人员,但使用PostCSS开发插件也就只需要短短的几个小时,就可以开发出一个全功能的插件。

在项目中使用像Stylus、Sass和LESS这样的预处理器能很好的工作,但它们不能成为每个人的一切。必须决定哪些特性能更好的为他们的用户群体服务。比如说,如果你想要一个功能,你可以做这样的功能,但它有可能会被其他人在项目中使用,但也很有可能其他人在项目中不需要使用。如法自由的结合到项目需求中。

即使有一个功能需求被认为适合项目需求,但项目维护人员或许没有时间去开发它。如果你自己又不具备这方面的技术水平,那么你也只能想想而以,无法使用上。

但是使用PostCSS,你不需要问任何人。如果你想要一个新特性,你自己完全可以做到。从我自己的经验来说,只要你略懂点JavaScript技术或经验,你就可以使用PostCSS创建自己需要的功能插件,而且自己是完全可控的。

在本系列后面的教程中,将通过创建一个PostCSS插件为例,告诉你如何创建PostCSS插件步骤。即使你认为自己不是一位JavaScript专家,我觉得你也会发现自己完全可以创建一个PostCSS插件。

4.PostCSS库不会绑定到一个处理器上

虽然过去他们可能一直使用Stylus、Sass或LESS来编写一个库,但我们也开始看到有人通过PostCSS来创建整个库。

例如,Cory Simmons当时使用Stylus和Sass编写了一个网格系统,他的用户群体只对应使用Stylus和Sass的用户。随后他使用PostCSS移植了这个网格系统,这也意味着现在每个人都可以使用了,包手Stylus、Sass用户,甚至是使用LESS或不使用任何预处理器的人。

5.PostCSS可以与流行工具无缝衔接

由于PostCSS是基于JavaScript编写,所以它不需要你安装Ruby等,而且你可以将其集成在多个开发者工具中。

  • PostCSS插件可以通过Grunt,Gulp,Webpack,Broccoli,BrunchEND等工具一起使用
  • CodePen允许你使用PostCSS
  • Prepros支持Autoprefixercssnext插件
  • postcss-use插件允许你使用简单的CSS规则加载其他插件
  • 你可以使用一个package.json文件,通过npm可以在命令终端输入npm install自动安装任何PostCSS插件。这样可以在项目中共用PostCSS插件,也不用担心插件的配置与变化

三. PostCSS怎么用?

1.准备
构建工具为Gulp
基于PostCSS
PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器
PostCSS插件 Autoprefixer 为CSS补全浏览器前缀
PostCSS插件 CSS Grace 让CSS兼容旧版IE

2.package.json

{
"name": "postcss usage",
"version": "1.0.0",
"description": "postcss cssnext",
"main": "gulpfile.js",
"dependencies": {
"autoprefixer": "^5.2.0",
"autoprefixer-core": "^5.2.1",
"cssgrace": "^2.0.2",
"gulp": "^3.9.0",
"gulp-less": "^3.0.3"
},
"devDependencies": {
"autoprefixer": "^5.2.0",
"autoprefixer-core": "^5.2.1",
"cssgrace": "^2.0.2",
"cssnext": "^1.8.4",
"gulp-postcss": "^6.0.0",
"postcss": "^4.1.16"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"postcss",
"gulp"
],
"author": "givebest",
"license": "ISC"
}

3.gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssgrace = require('cssgrace');
var cssnext = require('cssnext');

gulp.task('css', function () {
var processors = [
autoprefixer({browsers: ['last 3 version'],
cascade: false,
remove: false
}),
cssnext(),
cssgrace
];
return gulp.src('./src/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist'));
});
gulp.task('watch', function(){
gulp.watch('./src/css/*.css', ['css']);
});

gulp.task('default', ['watch', 'css']);

4.安装
npm install

5.使用

gulp

详细项目地址在: https://coding.net/u/givebest/p/postcss-usage/git

参考资料:

1. http://www.oschina.net/translate/its-time-for-everyone-to-learn-about-postcss

2. http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html

3. http://www.cnblogs.com/givebest/p/4771154.html?utm_source=tuicool&utm_medium=referral

4. http://www.open-open.com/lib/view/open1438092653706.html

本文固定链接: http://www.webzsky.com/?p=833 | 蓝戒的博客

cywcd
该日志由 cywcd 于2016年01月09日发表在 css, web技术, xhtml+css 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 前端汪PostCSS知多少? | 蓝戒的博客
关键字:

前端汪PostCSS知多少?:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×