PostCSS:用JS插件轉換樣式的工具

來自官方的文檔上寫著的是PostCSS是一個JS插件轉換樣式表的工具。這些插件能夠檢驗你的CSS、支持變量和混合,轉化CSS3的新特性語法、行內圖片等。 其中一個比較為人所知的插件AutoPrefixer就是出自這里,目前上面已經超過200多個插件在github。

解決全局CSS問題

使用最新的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.

圖片和字體

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.

語法類

PostCSS can transform styles in any syntax, not just CSS.
  • 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.

相關文章

演示

Autoprefixer

PostCSS最有名的插件是Autoprefixer。如名所示,可以自動為你添加瀏覽器私有前綴。它的添加值會參考Can I Use及你設定的瀏覽器支持范圍,因此相當可靠。下面是一個示例(以我設定的瀏覽器支持范圍):
.container{
    display: flex;
}
編譯后:
.container{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

postcss-nested&postcss-mixins

在剛開始使用PostCSS時,我就想到要用PostCSS實現我在Sass中最常用的特性。所以,我找到了postcss-nestedpostcss-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。 以上只是一個簡單的轉換,如果要正式做一個插件,請參考PostCSS插件指南。 參考: 在 CSS 預編譯器之后:PostCSS