提到css预编译器(css preprocessor),你可能想到SassLess以及Stylus。而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到。

“你说的我都懂,那为什么要用它?”

套装与单件

如果Sass等预编译器是新定义了一种模板语言,然后将其转化为css的话,PostCSS则是更纯粹地对css本身做转换。

回想一下你是如何学习使用css预编译器的:了解到有这样一种可以转化为css的语言,它有很多特性,变量、嵌套、继承等等,每一种特性都通过一定语法实现。大概就像是递给你一个已经封装好的工具箱(量产型?),你可以在里面找有用的东西。

那PostCSS是怎样呢?PostCSS就像只递给你一个盒子,但告诉你你可以从旁边的陈列柜取走自己想要的工具放进盒子打包带走。如果你觉得陈列柜里的不够好,PostCSS还可以帮你打造你自己的工具。所以,使用PostCSS,你可以仅取所需。

这就是PostCSS的模块化(modular)风格。它作为一个css转换工具,自身很小,其所有的转换功能都是插件,因此可以个性化配置。

PostCSS的简要原理

PostCSS自身只包括css分析器,css节点树API,source map生成器以及css节点树拼接器。

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

比较有意思的是,PostCSS的插件其实都是JavaScript函数,它们使用PostCSS的节点树API,对css节点树进行不同的转换。

插件预览

所有插件都可以在PostCSS的主页中查询到,这里只选取一小部分示意一下。

Autoprefixer

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

  1. .container{
  2. display: flex;
  3. }

编译后:

  1. .container{
  2. display: -webkit-box;
  3. display: -webkit-flex;
  4. display: -ms-flexbox;
  5. display: flex;
  6. }

postcss-nested&postcss-mixins

在刚开始使用PostCSS时,我就想到要用PostCSS实现我在Sass中最常用的特性。所以,我找到了postcss-nestedpostcss-mixins。将它们结合起来后,就可以做到这样:

  1. @define-mixin clearfix{
  2. &:after{
  3. display: table;
  4. clear: both;
  5. content: " ";
  6. }
  7. }
  8. .column-container{
  9. color: #333;
  10. @mixin clearfix;
  11. }

编译后:

  1. .column-container{
  2. color: #333;
  3. }
  4. .column-container:after{
  5. display: table;
  6. clear: both;
  7. content: " ";
  8. }

到这里,你是否已经有了“预编译器可以做到的它也可以做到”的感觉呢?

如何使用PostCSS

我个人推荐结合Gulp使用,本文在此只介绍gulp-postcss的用法。

gulp-postcss及插件都是npm,首先,使用npm install将它们分别安装到项目目录中(会位于node_modules)。然后,编辑glupfile.js,将PostCSS注册为Gulp的一个任务。以下是一个结合使用了Autoprefixerpostcss-simple-varspostcss-mixinspostcss-nested4个插件,且生成source map文件的例子:

  1. var gulp = require("gulp");
  2. var postcss = require("gulp-postcss");
  3. var autoprefixer = require('autoprefixer-core');
  4. var postcssSimpleVars = require("postcss-simple-vars");
  5. var postcssMixins = require("postcss-mixins");
  6. var postcssNested = require("postcss-nested");
  7. var sourcemaps = require("gulp-sourcemaps");
  8. // Css process.
  9. gulp.task("postcss", function(){
  10. var processors = [
  11. postcssMixins,
  12. postcssSimpleVars,
  13. postcssNested,
  14. autoprefixer({
  15. browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
  16. })];
  17. return gulp.src(["./stylesheets/src/*.css"])
  18. .pipe(sourcemaps.init())
  19. .pipe(postcss(processors))
  20. .pipe(sourcemaps.write("."))
  21. .pipe(gulp.dest("./stylesheets/dest"));
  22. });

在上面这段代码中,processors是一个数组,定义了用到的PostCSS插件。PostCSS会按照定义顺序依次执行插件,因此,在结合多个插件使用时,请注意它们的位置。

自定义转换

此外,你可以很容易地创建你自己的转换(还记得前面说过PostCSS的插件都是JavaScript函数吧?)。例如,下面是一个自定义的转换方法,它将css代码中的带有rem单位的值,更改为px的值。

  1. var custom = function(css, opts){
  2. css.eachDecl(function(decl){
  3. decl.value = decl.value.replace(/\d+rem/, function(str){
  4. return 16 * parseFloat(str) + "px";
  5. });
  6. });
  7. };

然后,你将这个方法直接添加到processors中(就像postcssMixins那些那样)就可以使用。如果原来有值是3rem,将变成48px

以上只是一个简单的转换,如果要正式做一个插件,请参考PostCSS插件指南

性能

PostCSS宣称,由JavaScript编写的PostCSS比C++编写的libsass(Sass原本是Ruby编写的,但后来出了C++的引擎,也就是libsass,它更快)还要快3倍。这里的具体数字我觉得不用多关心,可以感受到“PostCSS的运行速度很快”就足够了。

实际运行起来大概这样:

做到更多

基于PostCSS,可以做到许多现有的css预编译器做不到的事。例如,插件系列cssnext可以让你使用CSS4+的语法(增加了变量等许多特性),它会帮你转化为目前可用的CSS3。

一点问题

PostCSS有一个问题,那就是它是零散的,所以我无法找到一个编辑器能正确地解析并高亮准备使用PostCSS的css代码。例如在WebStorm中我把它当做普通的css文件,结果就会收到很多红色的错误提示。

所以,css预编译器过时了吗?

当然不会。就像其他流行的框架和工具那样,css预编译器是已经验证过的可用工具,我们完全可以根据需要选用。

Sass等css预编译器的特点是成熟可靠。一方面,它们已经是流行的模板语言,有完善的文档和周边支持,相对稳定,新加入团队的人也能比较容易地理解。另一方面,集成的风格有它的方便之处,就像你可能会懒得去组装一个模型,但能找到专业的人替你完成。

PostCSS的特点则是模块化。从长远来看,PostCSS可以做到更多类型的css转换。而可定制的风格非常适合追求个性的人(更快捷,而且可以自己做出很有趣的插件)。

此外,css预编译器和PostCSS可以协同使用。有一个流行的用法就是Sass编译后再接PostCSS的Autoprefixer(毕竟这是PostCSS的招牌插件)。

结语

PostCSS的风格可以说是在打造一个改变css开发方式的生态系统。所以如果说到未来,还是挺期待的。

(重新编辑自我的博客,原文地址:http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/

在 CSS 预编译器之后:PostCSS的更多相关文章

  1. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  2. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  3. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  4. css预编译器——Less的使用

      方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...

  5. CSS预编译器:Sass(入门),更快的前端开发

    SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...

  6. CSS预编译器less简单用法

    1.变量 定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...

  7. CSS预编译器:Sass(进阶),更快的前端开发

    1.@if     @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还 ...

  8. stylus(css预编译器)

    推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/ 安装 npm install -g stylus 自动编译 $ stylus -w demo.s ...

  9. 前端学习笔记系列一:6 一种新的css预编译器stylus

    stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...

随机推荐

  1. Mysql事务探索及其在Django中的实践(一)

    前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...

  2. PAT练习题目录

    点题号就能查看题解了,另外代码也放在了开源中国码云上: 甲级:代码集合:https://git.oschina.net/firstmiki/PAT-Advanced-Level-Practise 10 ...

  3. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  4. MongoDB学习笔记二—Shell操作

    数据类型 MongoDB在保留JSON基本键/值对特性的基础上,添加了其他一些数据类型. null null用于表示空值或者不存在的字段:{“x”:null} 布尔型 布尔类型有两个值true和fal ...

  5. ubuntu下配置vimtab空格数

    vim ~/.vimrc  没有就创建 set tabstop=4 //4就是4个空格

  6. 洛谷P1547 Out of Hay

    题目背景 奶牛爱干草 题目描述 Bessie 计划调查N (2 <= N <= 2,000)个农场的干草情况,它从1号农场出发.农场之间总共有M (1 <= M <= 10,0 ...

  7. 关于《Linux.NET学习手记(8)》的补充说明

    早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...

  8. Spark笔记:复杂RDD的API的理解(上)

    本篇接着讲解RDD的API,讲解那些不是很容易理解的API,同时本篇文章还将展示如何将外部的函数引入到RDD的API里使用,最后通过对RDD的API深入学习,我们还讲讲一些和RDD开发相关的scala ...

  9. Windows forfiles(删除历史文件)

    200 ? "200px" : this.width)!important;} --> 介绍 forfiles是windows自带的一个批量删除命令,对于时间的判断是通过文件 ...

  10. 一种简单,轻量,灵活的C#对象转Json对象的方案

    简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 补充:修正无法处理可空值类型的bug 首先我将这个类称之为JsonBuilder,我希望它以 ...