如何使用PostCSS構建自己的CSS預處理器

關鍵要點

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

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

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

然後在gulpfile.js中創建一個CSS處理函數數組，例如：

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%'] })
    ];

並編寫一個CSS處理任務，例如：

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

你也可以使用PostCSS API創建你自己的處理函數。例如，我們可以為所有font-family聲明應用一個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;
    }
}

運行gulp css將在/dest/css/styles.css中創建此CSS：

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

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

優勢

PostCSS使你擺脫了預處理器作者強加的限制和選擇。這種方法提供了幾個好處：

• 模塊化 你只需要為你的項目添加所需的插件和函數。
• 輕量級 預處理器正變得越來越龐大和復雜。你可能不會想要或使用每個功能，但它們仍然存在。 PostCSS減少了體積。
• 即時實現 你是否曾經等待過某些功能在Sass、LibSass、LESS、Stylus或其他預處理器中可用？你現在可以使用……
• JavaScript函數 你的CSS預處理器使用JavaScript——一種真正的編程語言（儘管有些人這麼說！）。大多數預處理器語言結構都是基本的。你經常會看到比它們創建的原始CSS更複雜、更難以理解的函數和mixin。使用PostCSS，可以輕鬆地打開文件、從數據庫讀取、發出HTTP請求或進行複雜的計算。
• 強制執行開發策略 假設你想讓你的團隊避免使用@extend聲明。除非他們向構建過程添加一個extend插件，否則任何人都無法使用@extend。這將是立即顯而易見的。
• 它很快——非常快 作者估計PostCSS比同等預處理器快4-40倍。如果只需要幾個插件，我認為收益會更高。整個解決方案都是用JavaScript構建的，不需要跳轉到另一個庫或語言解釋器。

缺點

那麼一切都好嗎？不幸的是，PostCSS並非完美的解決方案：

• 複雜性增加 你的構建過程將變得更難以管理。添加Sass通常是一兩行代碼，但PostCSS需要更多規劃——尤其因為插件必須以特定的順序調用。例如，@import內聯應該在解析變量之前解析。但是，如果你的@import聲明中包含變量怎麼辦？在某些情況下，可能需要多次調用插件。
• 不同的語法 我最初嘗試將一個小型的Sass項目轉換為PostCSS。 甚至不要嘗試！ 雖然我最終成功了，但PostCSS插件經常使用略微不同的語法，例如@define-mixin而不是@mixin。這可能會導致混淆和大量的代碼更新。部分原因是……
• PostCSS需要有效的CSS 大多數預處理器解析純文本文件，因此理論上任何語法都是可能的。 PostCSS創建了一個對像模型，因此它從一開始就需要語法正確的CSS。即使是//單行註釋也可能導致它失敗。你可以在傳遞給PostCSS之前預處理你的CSS文件，但那樣你又回到了使用預處理器！

你應該放棄你的預處理器嗎？

如果你在一個單人團隊中開始一個小型、相對簡單的獨立項目，自定義PostCSS處理器可能是一個有吸引力的選擇。我還推薦PostCSS用於任何真正的後處理任務，例如供應商前綴、將媒體查詢打包到單個聲明中、減少calc()方程、為舊瀏覽器應用後備、支持CSS4選擇器、縮小等。自己做這些工作沒有什麼好處。然而，Sass已經達到了臨界質量。沒有哪個預處理器的語法是完美的，但它會被你團隊中的大多數開發者理解。任何細微的不同都不太可能為每個人提供顯著的好處或吸引力。也就是說，PostCSS和類似的Rework框架具有巨大的潛力。如果一個模塊化的CSS插件系統能夠複製——甚至混合——我們想要的Sass、LESS和Stylus的語法和功能，我們將擁有一個能夠擊敗所有其他預處理器的預處理器。你可以打賭，現在有人正在開發這個項目……

你是否成功地將PostCSS用作項目的預處理器？它是否吸引你遠離Sass？你是否會從LESS遷移？你會放棄Stylus嗎？

關於PostCSS的常見問題解答

PostCSS與其他CSS預處理器的主要區別是什麼？

PostCSS是一個使用JavaScript插件轉換樣式的工具。這些插件可以執行各種任務，例如代碼整理、添加供應商前綴，甚至啟用未來的CSS功能。與Sass或Less等其他CSS預處理器不同，PostCSS沒有內置語法。相反，它使用插件來轉換CSS。這使得它更靈活和可定制，因為你可以只選擇項目所需的插件。

如何安裝和使用PostCSS？

要安裝PostCSS，你需要在你的計算機上安裝Node.js和npm。然後，你可以使用命令npm install -g postcss-cli全局安裝PostCSS。要使用PostCSS，你需要安裝你想要使用的插件，然後創建一個配置文件，在其中指定你想要使用的插件。然後，你可以使用命令postcss input.css -o output.css在你的CSS文件上運行PostCSS。

一些流行的PostCSS插件是什麼？

有許多可用的PostCSS插件，每個插件都有不同的用途。一些流行的插件包括Autoprefixer，它會自動向你的CSS添加供應商前綴；cssnext，它允許你今天就使用未來的CSS功能；以及cssnano，它會縮小你的CSS以用於生產環境。

我可以將PostCSS與其他CSS預處理器一起使用嗎？

是的，你可以將PostCSS與Sass或Less等其他CSS預處理器一起使用。這允許你利用這些預處理器的功能，同時也能從PostCSS的靈活性和強大功能中受益。

使用PostCSS的好處是什麼？

PostCSS提供了許多好處。它高度可定制，允許你只選擇所需的插件。這可以導致更小、更快的構建過程。 PostCSS還使你能夠今天就使用未來的CSS功能，並且它可以自動向你的CSS添加供應商前綴，從而節省你的時間並確保你的樣式在不同的瀏覽器中都能正常工作。

使用PostCSS有什麼缺點？

雖然PostCSS功能強大且靈活，但它的學習曲線可能比其他CSS預處理器更陡峭。因為它依賴於插件，你需要花時間研究和選擇適合你項目的插件。此外，因為它是一個較新的工具，所以它可能不像其他預處理器那樣得到廣泛的支持或採用。

PostCSS如何處理mixin？

PostCSS通過postcss-mixins插件處理mixin。這個插件允許你在CSS中定義和使用mixin，類似於你在Sass或Less中所做的那樣。你可以在PostCSS配置文件中定義一個mixin，然後使用@mixin關鍵字在你的CSS中使用它。

我可以在我的現有項目中使用PostCSS嗎？

是的，你可以將PostCSS集成到你的現有項目中。你只需要安裝PostCSS和想要使用的插件，然後設置一個PostCSS配置文件。然後，你可以在現有的CSS文件上運行PostCSS。

PostCSS與Autoprefixer或cssnext等其他工具相比如何？

Autoprefixer和cssnext實際上是PostCSS插件。這意味著它們是在PostCSS之上運行的工具，利用其插件架構。 Autoprefixer向你的CSS添加供應商前綴，而cssnext允許你今天就使用未來的CSS功能。

PostCSS適合大型項目嗎？

是的，PostCSS適合任何規模的項目。因為它具有可定制性，你可以只選擇所需的插件，從而實現更小、更快的構建過程。這使得它成為大型項目（其中性能是一個問題）的一個不錯的選擇。

以上是如何使用PostCSS構建自己的CSS預處理器的詳細內容。更多資訊請關注PHP中文網其他相關文章！