PostCSS：Sass 的新播放日期

最近，PostCSS 是 Web 開發前端的流行工具。

PostCSS 由 Autoprefixer 的創建者 Andrey Sitnik 開發。 它是一個 Node.js 包，作為使用 JavaScript 轉換所有 CSS 的工具而開發，從而實現比其他處理器更快的構建時間。

儘管它的名字似乎暗示了什麼，但它不是後處理器（也不是預處理器），而是將 PostCSS 特定（或 PostCSS 插件特定，更準確地說）語法轉換為香草 CSS。

話雖如此，但這並不意味著 PostCSS 和其他 CSS 處理器不能一起工作。 事實上，如果您是 CSS 預處理/後處理領域的新手，使用 PostCSS 和 Sass 可以為您省去很多麻煩，我們很快就會談到。

PostCSS 不是其他 CSS 處理器的替代品； 相反，將其視為另一種在需要時可能派上用場的工具，另一種添加到您的工具集中。

PostCSS 的使用最近開始呈指數級增長，今天一些最大的科技行業企業都在使用它，例如 Twitter、JetBrains 和 Wikipedia。 它的廣泛採用和成功很大程度上歸功於它的模塊化。

插件，插件，插件

PostCSS 是關於插件的。

它允許您選擇您將使用的插件，放棄不需要的依賴項，並為您提供快速和輕量級的設置，並具有其他預處理器的基本特徵。 此外，它還允許您為工作流創建更高度定制的結構，同時保持高效。

截至本文撰寫之日，PostCSS 擁有超過 200 個插件的存儲庫，每個插件負責不同的任務。 在 PostCSS 的 GitHub 存儲庫中，插件按“解決全球 CSS 問題”、“今天使用未來的 CSS”、“更好的 CSS 可讀性”、“圖像和字體”、“Linters”和“其他”進行分類。

但是，在插件目錄中，您會發現更準確的分類。 我建議您自己看看那裡，以更好地了解其中一些功能； 它們相當廣泛，相當令人印象深刻。

您可能聽說過最流行的 PostCSS 插件 Autoprefixer，它是一個流行的獨立庫。 第二個最受歡迎的插件是 CSSNext，它允許您使用當今最新的 CSS 語法，例如 CSS 的新自定義屬性，而無需擔心瀏覽器支持。

不過，並非所有 PostCSS 插件都如此具有開創性。 有些只是為您提供可能與其他處理器一起開箱即用的功能。 以parent selector為例。 使用 Sass，您可以在安裝 Sass 時立即開始使用它。 使用 PostCSS，您需要使用postcss-nested-ancestors插件。 這同樣適用於extends或mixins 。

那麼，使用 PostCSS 及其插件有什麼好處呢？ 答案很簡單——你可以選擇自己的戰鬥。 如果您覺得您將要使用的 Sass 的唯一部分是parent selector ，您可以省去在您的環境中實現類似 Sass 庫安裝來編譯 CSS 的壓力，並通過使用只有 PostCSS 和postcss-nested-ancestors插件。

這只是 PostCSS 的一個示例用例，但是一旦您開始親自檢查它，您無疑會意識到它的許多其他用例。

基本 PostCSS 使用

首先，讓我們介紹一些 PostCSS 基礎知識並看看它通常是如何使用的。 雖然 PostCSS 在與 Gulp 或 Grunt 等任務運行器一起使用時非常強大，但也可以通過使用 postcss-cli 從命令行直接使用它。

讓我們考慮一個簡單的示例用例。 假設我們想使用 postcss-color-rgba-fallback 插件來為我們所有的 RGBA 格式顏色添加一個備用 HEX 值。

一旦我們 NPM 安裝了postcss 、 postcss-cli和postcss-color-rgba-fallback ，我們需要運行以下命令：

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

通過這條指令，我們告訴 PostCSS 使用postcss-color-rgba-fallback插件，處理src/css/all.css中的任何 CSS，並將其輸出到dist/css/all.css 。

好的，這很容易。 現在，讓我們看一個更複雜的例子。

將 PostCSS 與 Task-runners 和 Sass 一起使用

PostCSS 可以很容易地整合到您的工作流程中。 如前所述，它與 Grunt、Gulp 或 Webpack 等任務運行器完美集成，甚至可以與 NPM 腳本一起使用。 將 PostCSS 與 Sass 和 Gulp 一起使用的示例就像以下代碼片段一樣簡單：

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

讓我們解構上面的代碼示例。

它將對所有需要的模塊（Gulp、Contact CSS、Sass、PostCSS 和 CSSNext）的引用存儲在一系列變量中。

然後，它註冊了一個名為stylesheets的新 Gulp 任務。 該任務./src/css/中擴展名為.scss的文件（無論它們在子目錄結構中的深度如何），Sass 編譯它們，並將它們全部連接到單個all.css文件中。

生成all.css文件後，將其傳遞給 PostCSS 以將所有 PostCSS（和插件）相關代碼轉換為實際 CSS，然後將生成的文件放在./dist/css中。

好的，所以使用任務運行器和預處理器設置 PostCSS 很棒，但這是否足以證明首先使用 PostCSS 是合理的？

讓我們這樣說吧：雖然 Sass 穩定、成熟並且背後有一個龐大的社區，但我們可能希望將 PostCSS 用於像 Autoprefixer 這樣的插件。 是的，我們可以使用獨立的 Autoprefixer 庫，但是使用 Autoprefixer 作為 PostCSS 插件的優點是可以在以後向工作流中添加更多插件，並避免對大量 JavaScript 庫的無關依賴。

這種方法還允許我們使用不帶前綴的屬性，並根據從 API 中獲取的值對它們進行前綴，例如 Can I Use 中的值，這是僅使用 Sass 很難實現的。 如果我們試圖避免複雜的混入，這可能不是給代碼添加前綴的最佳方式，這非常有用。

如果您已經在使用 Sass，將 PostCSS 集成到當前工作流程中的最常見方法是通過 PostCSS 及其插件傳遞.sass或.scss文件的編譯輸出。 這將生成另一個具有 Sass 和 PostCSS 輸出的 CSS 文件。

如果您使用的是任務運行器，那麼使用 PostCSS 就像在編譯您的.sass或.scss文件（或您選擇的預處理器的文件）之後將其添加到您當前擁有的任務管道中一樣簡單。

PostCSS 可以很好地與其他人一起使用，並且可以緩解我們作為開發人員每天遇到的一些主要痛點。

讓我們看一下 PostCSS（以及一些插件，如 CSSNext 和 Autoprefixer）和 Sass 一起工作的另一個示例。 你可以有以下代碼：

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

這段代碼有 vanilla CSS 和 Sass 語法。 截至本文撰寫之日，自定義屬性仍處於候選推薦 (CR) 狀態，這就是 PostCSS 的 CSSNext 插件發揮作用的地方。

這個插件將負責將自定義屬性之類的東西變成今天的 CSS。 transform屬性也會發生類似的事情，它將由 Autoprefixer 插件自動添加前綴。 之前編寫的代碼將產生如下結果：

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

PostCSS 的創作插件

如前所述，PostCSS 的一個吸引人的特性是它允許的自定義級別。 由於它的開放性，如果您喜歡編寫 JavaScript，那麼為 PostCSS 編寫您自己的自定義插件來滿足您的特定需求是一項相當簡單的任務。

PostCSS 的人有一個非常可靠的列表可以開始，如果你對開發插件感興趣，請查看他們推薦的文章和指南。 如果您覺得需要提出一些問題或討論任何事情，那麼 Gitter 是最好的起點。

PostCSS 的 API 在 Twitter 上擁有相當活躍的粉絲群。 連同本文前面提到的其他社區福利，這就是使插件創建過程如此有趣和如此協作的活動的原因。

因此，要創建 PostCSS 插件，我們需要創建一個 Node.js 模塊。 （通常， node_modules/目錄中的 PostCSS 插件文件夾前面有一個前綴，如“postcss-”，這是為了明確表示它們是依賴於 PostCSS 的模塊。）

首先，在新插件模塊的index.js文件中，我們需要包含以下代碼，這將是插件處理代碼的包裝器：

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

我們將插件命名為replacecolors 。 該插件將查找關鍵字deepBlackText並將其替換為#2e2e2e HEX 顏色值：

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

前面的代碼片段只是做了以下事情：

1. 使用walkRules()它遍歷了我們正在處理的當前.css文件中的所有 CSS 規則。
2. 使用walkDecls()它遍歷當前.css文件中的所有 CSS 聲明。
3. 然後它將聲明存儲在聲明變量中，並檢查字符串deepBlackText是否在其中。 如果是，它將替換整個聲明為以下 CSS 聲明： color: #2e2e2e; .

插件準備好後，我們可以直接從命令行使用它：

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

或者，例如，像這樣加載到Guplfile中：

 var replacecolors = require('postcss-replacecolors');

為了使用 PostCSS，我應該放棄當前的 CSS 處理器嗎？

嗯，這取決於你在尋找什麼。

同時使用 Sass 和 PostCSS 是很常見的，因為新手可以更輕鬆地使用前/後處理器提供的一些開箱即用的工具，以及 PostCSS 插件的功能。 並排使用它們還可以避免使用相對較新且很可能未知的工具重建預定義的工作流程，同時提供一種維護當前處理器相關實現的方法（如Sass mixins 、 extends 、父選擇器、佔位符選擇器、等等）。

給 PostCSS 一個機會

PostCSS 是前端開發世界中的熱門（嗯，有點）新事物。 它已被廣泛採用，因為它本身不是前置/後置處理器，並且它足夠靈活以適應它所插入的環境。

PostCSS 的大部分功能都在於它的插件。 如果您正在尋找的是模塊化、靈活性和多樣性，那麼這就是適合這項工作的工具。

如果您正在使用任務運行程序或捆綁程序，那麼將 PostCSS 添加到您當前的流程中很可能是小菜一碟。 查看安裝和使用指南，您可能會找到一種將其與您已經在使用的工具集成的簡單方法。

許多開發商表示，至少在可預見的未來，它將繼續存在。 PostCSS 可以對我們如何構建當今的 CSS 產生巨大影響，這可能會導致前端 Web 開發社區更多地採用標準。