PostCss简介

官网地址：http://postcss.org/

源代码地址：https://github.com/postcss

来自官方的文档上写着的是PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

其中一个比较为人所知的插件AutoPrefixer就是出自这里，目前上面已经超过200多个插件在github。

解决全局CSS问题

• postcss-use to explicitly set PostCSS plugins in CSS and execute them only for the current file.
• postcss-modules or react-css-modules automatically isolates selectors in components.
• postcss-autoreset uses local reset in component, instead of global one.
• postcss-initial adds all: initial support to reset all inherit styles.
• cq-prolyfill adds media queries for component size or parent background.

使用最新的CSS特性

• autoprefixer adds vendor prefixes, using data from Can I Use.
• cssnext allows you to use future CSS features today (includes autoprefixer).

更高的CSS可读性

• precss contains plugins for Sass-like features like nesting or mixins.
• postcss-sorting sorts rules content with specified order.
• short adds and extends numerous shorthand properties.

图片和字体

• postcss-assets inserts image dimensions and inlines files.
• postcss-sprites generates image sprites.
• font-magician generates all the @font-face rules needed in CSS.
• postcss-inline-svg allows to inline SVG and customize its styles.
• postcss-write-svg allows to write simple SVG directly in CSS.

Linters

• stylelint is a modular linter for CSS.
• doiuse lints CSS for browser support, using data from Can I Use.
• colorguard helps maintain a consistent color palette.

Other

• lost is feature-rich calc() grid system by Jeet author.
• cssnano is a modular CSS minifier.
• rtlcss mirrors styles for right-to-left locales.

语法类

viaPostCSS can transform styles in any syntax, not just CSS.原文来自：http://caibaojian.com/postcss.html

• postcss-scss to work with SCSS (but does not compile SCSS to CSS).
• postcss-js to write styles in JS or transform React Inline Styles, Radium or JSS.
• postcss-safe-parser finds and fixes CSS syntax errors.
• midas converts a CSS string to highlighted html.

相关文章

• Some things you may think about PostCSS… and you might be wrong
• What PostCSS Really Is; What It Really Does
• PostCSS Guides

演示

Autoprefixer

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

.container{
    display: flex;
}

编译后：

//code from http://caibaojian.com/postcss.html
.container{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

postcss-nested&postcss-mixins

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

@define-mixin clearfix{
    &:after{
        display: table;
        clear: both;
        content: " ";
    }
}

.column-container{
    color: #333;
    @mixin clearfix;
}

编译后：

.column-container{
    color: #333;
}

.column-container:after{
    display: table;
    clear: both;
    content: " ";
}

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

如何使用PostCSS

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

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

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var autoprefixer = require('autoprefixer-core');
var postcssSimpleVars = require("postcss-simple-vars");
var postcssMixins = require("postcss-mixins");
var postcssNested = require("postcss-nested");
var sourcemaps = require("gulp-sourcemaps");

// Css process.
gulp.task("postcss", function(){
    var processors = [
        postcssMixins,
        postcssSimpleVars,
        postcssNested,
        autoprefixer({
            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
        })];

    return gulp.src(["./stylesheets/src/*.css"])
        .pipe(sourcemaps.init())
        .pipe(postcss(processors))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("./stylesheets/dest"));
});

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

自定义转换

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

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

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

更多：

cssnext

在 ASP.NET 应用中使用 LESS