PostCSS簡介

> POSTCSS：強大的CSS工具超出預處理器

本介紹COPTCSS探討了其優於傳統CSS（如Sass and Sass）的優勢，它的功能以及其龐大的插件生態系統的功能。

鍵突出顯示：

基於node.js的工具> PostCSS，使用插件增強有效的CSS。 它將CSS解析為抽象的語法樹（AST），在生成最終輸出之前可以操縱。 它可以補充諸如Sass，Simelt或Stylus的預處理器。

> PostCSS提供的好處，包括標準CSS解析，可自定義的插件集成，特定於項目的配置以及創建自定義插件的功能。 許多開發人員已經通過插件（例如AutopRefixer）間接地使用Postcs。

> PostCSS需要Node.js，與WebPack，Parcel和Gulp.js等構建工具無縫集成。 請注意，至少一個插件對於功能都是必需的。
• > PostCSS使用 postcss支持源文件更改的自動重建。 JavaScript配置文件允許進行全面的選項管理和特定環境設置（開發與生產）。
• >預處理程序：優點和劣勢
• --watch>諸如Sass，Limes和Stylus之類的預處理器引入了嵌套，變量和Mixins等功能，從而改善了CSS管理。儘管其中一些功能成為本地CSS，但預處理器對於大型項目和保持編碼一致性仍然很有價值。
但是，預處理器有局限性：

有限的可擴展性：預處理程序提供固定的功能集，因此很難將功能擴展到其內置功能之外。 自定義功能可能是可能的，但是複雜的任務（例如內部的SVG）仍然超出其範圍。 執行編碼樣式也很具有挑戰性。

非標準語法：預處理器介紹自己的語法，需要在瀏覽器解釋之前進行彙編。如果預處理器更改或不可用，則會創建依賴性問題，並需要代碼更新。

>

PostCSS提供了令人信服的替代方案。

• 了解PostCSS
PostCSS不是預處理器；這是CSS變壓器。它處理有效的CSS，通過插件來增強它。 即使是SASS/更少的用戶，在初次彙編後也經常合併郵政編碼。通用的PostCSS插件AutoPrefixer會自動添加供應商前綴。
• Postcss本身是被動的；它將CSS解析為AST。插件處理此AST，修改屬性。 然後，PostCSS從修改後的AST。PostCSS提供了大約350個插件，涵蓋了

  處理，@import簡化，圖像資產處理，覆蓋和縮短的任務，PostCSS提供了廣泛的靈活性。 可以通過PostCSS插件目錄訪問用戶友好的插件搜索。 calc()> PostCSS優勢包括：

  >標準CSS：> >可自定義功能：
僅使用所需的插件和功能。 這允許對CSS處理管道進行細粒度的控制。
• > 特定於項目的配置：
為每個項目分別配置插件，適合特定要求。
• 自定義插件開發：
在JavaScript中創建自定義插件以擴展PostCSS的功能。
• >潛在的預處理器替換：
如果已經使用了諸如autoprefixer之類的插件，那麼PostCSS可能會替換您的預處理器，將工作流簡化為單個步驟。
• >
>安裝和使用PostCSS

> Postcss需要node.js。本指南展示了命令行安裝和用法，儘管與構建工具的集成也是可能的。

全局安裝：

1. >驗證安裝：

   <code class="language-bash">npm install -g postcss-cli</code>

2. 插件安裝（PostCSS-Import）：

   <code class="language-bash">postcss --help</code>

>創建一個示例項目（
3. ），其中包含，，

   <code class="language-bash">npm install -g postcss-import</code>

   的文件夾和
> files（如原始文本中所述）。 然後運行PostCSS：

cssproject src源地圖，AutopRefixer和Minification main.css_reset.css _elements.css PostCSS默認情況下生成內線源地圖。 使用

用於外部地圖，

<code class="language-bash">postcss ./src/main.css --use postcss-import --output ./styles.css</code>

將其禁用（建議用於生產）。

> autoprefixer添加供應商前綴：>

>與

命令一起使用--map。 --no-mapcssnano將CSS減小：

將其包括在您的

<code class="language-bash">npm install -g autoprefixer</code>

>命令中，然後使用

進行生產。 postcss> postcss-import

>自動化構建和配置文件

<code class="language-bash">npm install -g cssnano</code>

和postcss>選項啟用文件更改上的自動重建。 > --no-mapa

>文件簡化配置：

使用

進行開發模式並省略用於生產。

> --watch--verbose結論

PostCSS提供了一種靈活而有力的CSS處理方法。 通過掌握其插件系統，您可以為任何Web項目創建高度定制和高效的工作流程。 原始文本中提供了更多資源。 常見問題解答還包括在原始文本的末尾。

>

以上是PostCSS簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！