關(guān)鍵要點(diǎn)

• PostCSS允許開(kāi)發(fā)者構(gòu)建自己的CSS預(yù)處理器，比Sass、LESS或Stylus等其他預(yù)處理器提供更大的靈活性和控制性。它使用JavaScript插件來(lái)操作樣式，並能夠添加類(lèi)似預(yù)處理器的功能，例如變量、mixin和嵌套。
• PostCSS的優(yōu)勢(shì)包括模塊化、輕量級(jí)構(gòu)建、新功能的即時(shí)實(shí)現(xiàn)以及強(qiáng)制執(zhí)行開(kāi)發(fā)策略的能力。它也比傳統(tǒng)的預(yù)處理器更快。但是，它也有一些缺點(diǎn)，例如構(gòu)建過(guò)程的複雜性增加、不同的語(yǔ)法以及對(duì)有效CSS的要求。
• 雖然PostCSS具有巨大的潛力，但它可能並不適合所有項(xiàng)目。對(duì)於小型、簡(jiǎn)單的項(xiàng)目或單人團(tuán)隊(duì)來(lái)說(shuō)，它可能是一個(gè)有吸引力的選擇。但對(duì)於大型團(tuán)隊(duì)或項(xiàng)目，由於Sass的廣泛理解和使用，現(xiàn)有的預(yù)處理器仍然可能是首選。

許多開(kāi)發(fā)者已經(jīng)採(cǎi)用了LESS、Stylus或當(dāng)前最受歡迎的Sass。理想情況下，你還應(yīng)該使用Autoprefixer對(duì)你的CSS進(jìn)行後處理，以便在需要時(shí)添加供應(yīng)商前綴，而無(wú)需使用mixin或Compass之類(lèi)的框架。 Autoprefixer是PostCSS的插件；它是一個(gè)將CSS轉(zhuǎn)換為可用於操作樣式的對(duì)像模型的工具。還有許多其他可用的插件實(shí)現(xiàn)了類(lèi)似預(yù)處理器的功能，例如變量、mixin和嵌套。 Ben Frain最近的文章《與Sass分手：不是你，是我》提出了一個(gè)有趣的命題。鑑於你可以使用PostCSS創(chuàng)建你想要的CSS預(yù)處理器，你真的需要Sass、LESS或Stylus嗎？一個(gè)基本的類(lèi)似Sass的解析器可以在你的構(gòu)建過(guò)程中創(chuàng)建。在這個(gè)例子中，我將使用一個(gè)Gulp.js任務(wù)文件，但同樣的概念也適用於Grunt或任何其他構(gòu)建系統(tǒng)。首先，我們使用npm安裝PostCSS和所需的插件，例如：

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

然後在gulpfile.js中創(chuàng)建一個(gè)CSS處理函數(shù)數(shù)組，例如：

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

並編寫(xiě)一個(gè)CSS處理任務(wù)，例如：

// 編譯CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

你也可以使用PostCSS API創(chuàng)建你自己的處理函數(shù)。例如，我們可以為所有font-family聲明應(yīng)用一個(gè)sans-serif後備：

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后備
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

如果文件/source/css/styles.css包含以下代碼：

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

運(yùn)行g(shù)ulp css將在/dest/css/styles.css中創(chuàng)建此CSS：

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

優(yōu)勢(shì)

PostCSS使你擺脫了預(yù)處理器作者強(qiáng)加的限制和選擇。這種方法提供了幾個(gè)好處：

• 模塊化 你只需要為你的項(xiàng)目添加所需的插件和函數(shù)。
• 輕量級(jí) 預(yù)處理器正變得越來(lái)越龐大和復(fù)雜。你可能不會(huì)想要或使用每個(gè)功能，但它們?nèi)匀淮嬖凇?PostCSS減少了體積。
• 即時(shí)實(shí)現(xiàn) 你是否曾經(jīng)等待過(guò)某些功能在Sass、LibSass、LESS、Stylus或其他預(yù)處理器中可用？你現(xiàn)在可以使用……
• JavaScript函數(shù) 你的CSS預(yù)處理器使用JavaScript——一種真正的編程語(yǔ)言（儘管有些人這麼說(shuō)?。?。大多數(shù)預(yù)處理器語(yǔ)言結(jié)構(gòu)都是基本的。你經(jīng)常會(huì)看到比它們創(chuàng)建的原始CSS更複雜、更難以理解的函數(shù)和mixin。使用PostCSS，可以輕鬆地打開(kāi)文件、從數(shù)據(jù)庫(kù)讀取、發(fā)出HTTP請(qǐng)求或進(jìn)行複雜的計(jì)算。
• 強(qiáng)制執(zhí)行開(kāi)發(fā)策略 假設(shè)你想讓你的團(tuán)隊(duì)避免使用@extend聲明。除非他們向構(gòu)建過(guò)程添加一個(gè)extend插件，否則任何人都無(wú)法使用@extend。這將是立即顯而易見(jiàn)的。
• 它很快——非?？?/strong> 作者估計(jì)PostCSS比同等預(yù)處理器快4-40倍。如果只需要幾個(gè)插件，我認(rèn)為收益會(huì)更高。整個(gè)解決方案都是用JavaScript構(gòu)建的，不需要跳轉(zhuǎn)到另一個(gè)庫(kù)或語(yǔ)言解釋器。