關鍵要點
許多開發者已經採用了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並非完美的解決方案：
你應該放棄你的預處理器嗎？
如果你在一個單人團隊中開始一個小型、相對簡單的獨立項目，自定義PostCSS處理器可能是一個有吸引力的選擇。我還推薦PostCSS用於任何真正的後處理任務，例如供應商前綴、將媒體查詢打包到單個聲明中、減少calc()方程、為舊瀏覽器應用後備、支持CSS4選擇器、縮小等。自己做這些工作沒有什麼好處。然而，Sass已經達到了臨界質量。沒有哪個預處理器的語法是完美的，但它會被你團隊中的大多數開發者理解。任何細微的不同都不太可能為每個人提供顯著的好處或吸引力。也就是說，PostCSS和類似的Rework框架具有巨大的潛力。如果一個模塊化的CSS插件系統能夠複製——甚至混合——我們想要的Sass、LESS和Stylus的語法和功能，我們將擁有一個能夠擊敗所有其他預處理器的預處理器。你可以打賭，現在有人正在開發這個項目……
你是否成功地將PostCSS用作項目的預處理器？它是否吸引你遠離Sass？你是否會從LESS遷移？你會放棄Stylus嗎？
關於PostCSS的常見問題解答
PostCSS是一個使用JavaScript插件轉換樣式的工具。這些插件可以執行各種任務，例如代碼整理、添加供應商前綴，甚至啟用未來的CSS功能。與Sass或Less等其他CSS預處理器不同，PostCSS沒有內置語法。相反，它使用插件來轉換CSS。這使得它更靈活和可定制，因為你可以只選擇項目所需的插件。
要安裝PostCSS，你需要在你的計算機上安裝Node.js和npm。然後，你可以使用命令npm install -g postcss-cli全局安裝PostCSS。要使用PostCSS，你需要安裝你想要使用的插件，然後創建一個配置文件，在其中指定你想要使用的插件。然後，你可以使用命令postcss input.css -o output.css在你的CSS文件上運行PostCSS。
有許多可用的PostCSS插件，每個插件都有不同的用途。一些流行的插件包括Autoprefixer，它會自動向你的CSS添加供應商前綴；cssnext，它允許你今天就使用未來的CSS功能；以及cssnano，它會縮小你的CSS以用於生產環境。
是的，你可以將PostCSS與Sass或Less等其他CSS預處理器一起使用。這允許你利用這些預處理器的功能，同時也能從PostCSS的靈活性和強大功能中受益。
PostCSS提供了許多好處。它高度可定制，允許你只選擇所需的插件。這可以導致更小、更快的構建過程。 PostCSS還使你能夠今天就使用未來的CSS功能，並且它可以自動向你的CSS添加供應商前綴，從而節省你的時間並確保你的樣式在不同的瀏覽器中都能正常工作。
雖然PostCSS功能強大且靈活，但它的學習曲線可能比其他CSS預處理器更陡峭。因為它依賴於插件，你需要花時間研究和選擇適合你項目的插件。此外，因為它是一個較新的工具，所以它可能不像其他預處理器那樣得到廣泛的支持或採用。
PostCSS通過postcss-mixins插件處理mixin。這個插件允許你在CSS中定義和使用mixin，類似於你在Sass或Less中所做的那樣。你可以在PostCSS配置文件中定義一個mixin，然後使用@mixin關鍵字在你的CSS中使用它。
是的，你可以將PostCSS集成到你的現有項目中。你只需要安裝PostCSS和想要使用的插件，然後設置一個PostCSS配置文件。然後，你可以在現有的CSS文件上運行PostCSS。
Autoprefixer和cssnext實際上是PostCSS插件。這意味著它們是在PostCSS之上運行的工具，利用其插件架構。 Autoprefixer向你的CSS添加供應商前綴，而cssnext允許你今天就使用未來的CSS功能。
是的，PostCSS適合任何規模的項目。因為它具有可定制性，你可以只選擇所需的插件，從而實現更小、更快的構建過程。這使得它成為大型項目（其中性能是一個問題）的一個不錯的選擇。
以上是如何使用PostCSS構建自己的CSS預處理器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
