CSS

如何优雅的写 CSS —— PostCSS 实现更高效

说起 postcss到底是做什么的，很多人都会困惑不已，毕竟有了 sass 和 gulp，还要一个上手难度更高的 postcss 做什么？

首先，sass 的工作流程是重新定义一套规则，然后转化为 CSS 代码，而 postcss 则是直接对 css 代码进行转换。

原理

PostCSS 的原理是识别 css 节点，然后对节点进行相应的转换重新生成 css 代码，它本身只是一个相当于 gulp 或者 webpack 的平台，但是通过它提供的插件可以实现很多功能。

插件

它的插件都是用 javascript 代码写成，所以你也可以写一个自己的插件。一个很常用的插件就是 Autoprefixer，它可以帮你自动完成针对不同浏览器的代码前缀。

原来的代码：

.container{
    display: flex;
}

转换之后的代码：

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

使用方法

PostCSS 有很多强大的用法，但是最常用的方法是结合 sass 来使用，将编译成的 css 代码再用 PostCSS 进行优化。

当然，基本的用法还是要结合 gulp 或者 webpack 来使用。

在 gulp 中：

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer');
    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dest'));
});

在 webpack 中：

module.exports = {
    module: {
        rules: [
            {
                test:   /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            }
        ]
    }
}

同时需要新建一个 postcss.config.js 文件：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

总结

作为一个很强大的工具，只用到了一个 Autoprefixer 插件的功能，其实是大材小用的，但是这对于很多项目也已经是足够了，以后有其他复杂的项目需要使用的时候再去细细研究吧。