搜尋

首頁 >web前端 >css教學 >如何使用PostCSS作為SASS的可配置替代品

如何使用PostCSS作為SASS的可配置替代品

Lisa Kudrow
Lisa Kudrow原創
2025-02-12 08:24:12898瀏覽

How to Use PostCSS as a Configurable Alternative to Sass

Web開發者鍾愛Sass CSS預處理器。根據State of CSS調查中的Sass觀點，每位開發者都了解Sass，89%的開發者定期使用它，88%的開發者對其滿意度很高。

許多Web打包器包含Sass處理，但您可能也在不知不覺中使用了PostCSS。 PostCSS主要以其Autoprefixer插件而聞名，該插件在需要時會自動為CSS屬性添加-webkit、-moz和-ms供應商前綴。其插件系統意味著它可以做更多的事情……例如，無需使用Sass編譯器即可編譯.scss文件。

本教程解釋如何創建一個自定義CSS預處理器，該預處理器編譯Sass語法並補充更多功能。對於了解一些Node.js並具有特定CSS需求的任何人來說，它都是理想的選擇。

關鍵要點

  • 可配置性和自定義性：與Sass相比，PostCSS提供了高度可配置的環境。它基於插件的架構運行，每個插件執行特定任務，允許開發者根據特定項目需求定制其設置。
  • 性能注意事項：雖然基於Dart的Sass編譯器速度很快，但基於JavaScript構建的PostCSS可能會更慢。但是，對於已經使用PostCSS的項目，速度差異可能可以忽略不計，使其成為可行的單進程解決方案。
  • 安裝和設置：PostCSS可以與各種構建工具集成，也可以從命令行運行。類似Sass的環境的基本設置需要安裝幾個插件，例如postcss-scss、postcss-advanced-variables、postcss-nested和autoprefixer。
  • 使用插件增強功能：PostCSS超越了傳統的預處理器功能，其插件可以處理設計令牌、優化媒體查詢、管理資產，甚至可以根據環境有條件地執行CSS壓縮。
  • 簡化開發堆棧的潛力：對於已經使用PostCSS的團隊，可能可以完全消除開發堆棧中的Sass，依靠PostCSS來滿足所有CSS處理需求，包括處理類似Sass的語法和功能。

快速入門

可以從GitHub克隆一個PostCSS示例項目。它需要Node.js，因此運行npm install來獲取所有依賴項。

使用以下命令將演示src/scss/main.scss源代碼編譯為build/css/main.css：

<code>npm run css:dev</code>

使用以下命令在文件更改時自動編譯：

<code>npm run css:watch</code>

然後通過在終端中按Ctrl | Cmd C退出監視。

這兩個選項還在build/css/main.css.map中創建一個源映射，該映射引用開發者工具中的原始源文件。

可以使用以下命令編譯不帶源映射的生產級壓縮CSS：

<code>npm run css:build</code>

有關更多信息，請參閱README.md文件。

您應該用PostCSS替換Sass嗎？

Sass編譯器沒有任何問題，但請考慮以下因素。

模塊依賴

可以使用Node.js npm包管理器全局安裝最新版本的Dart Sass：

<code>npm run css:dev</code>

使用以下命令編譯Sass .scss代碼：

<code>npm run css:watch</code>

自動生成源映射（--no-source-map將關閉它們）或添加--watch，以便在源文件更改時自動編譯它們。

最新版本的Sass安裝空間小於5MB。

PostCSS應該需要更少的資源，並且帶有自動前綴和壓縮功能的基本Sass式編譯器需要不到1MB的空間。實際上，您的node_modules文件夾將擴展到超過60MB，並且隨著添加更多插件而迅速增加。這主要是npm安裝其他依賴項。即使PostCSS可能不使用它們，也不能將其視為輕量級替代方案。

但是，如果您已經在使用PostCSS進行Autoprefixer或其他用途，則可能不需要Sass。

處理速度

緩慢的基於Ruby的Sass編譯器早已消失，最新版本使用編譯的Dart運行時。 它很快。

PostCSS是純JavaScript，雖然基準測試會有所不同，但在編譯相同的源代碼時，它可能會慢三倍。

但是，如果您已經在Sass之後運行PostCSS，則這種速度差異將不太明顯。兩階段過程可能比單獨使用PostCSS慢，因為它的許多工作都涉及到CSS屬性的標記化。

自定義

Sass語言包含大量功能，包括變量、嵌套、部分、混合等。但也有一些缺點：

  1. 您無法輕鬆添加新功能。

    您可能希望有一個選項將HSLA顏色轉換為RGB。編寫自定義函數可能是可能的，但其他需求將是不可能的——例如將SVG內聯爲背景圖像。

  2. 您無法輕鬆限制功能集。

    您可能更希望您的團隊不使用嵌套或@extend。 Lint規則會有所幫助，但它們不會阻止Sass編譯有效的.scss文件。

PostCSS更易於配置。

PostCSS本身什麼也不做。處理功能需要一個或多個可用的插件。大多數插件執行單個任務，因此如果您不需要嵌套，則不要添加嵌套插件。如有必要，您可以使用標準JavaScript模塊編寫自己的插件，該模塊可以利用Node.js的功能。

安裝PostCSS

PostCSS可以與webpack、Parcel、Gulp.js和其他構建工具一起使用，但本教程演示瞭如何從命令行運行它。

如有必要，請使用npm init初始化一個新的Node.js項目。通過安裝以下模塊來設置PostCSS，以便使用用於部分、變量、混合、嵌套和自動前綴的插件進行基本.scss解析：

<code>npm run css:build</code>

與示例項目一樣，PostCSS及其插件是在本地安裝的。如果您的項目可能具有不同的編譯需求，這是一個實用的選擇。

注意：PostCSS只能從JavaScript文件運行，但postcss-cli模塊提供了一個可以從命令行調用的包裝器。 postcss-scss模塊允許PostCSS讀取.scss文件，但不轉換它們。

Autoprefixer配置

Autoprefixer使用browserslist根據您支持的瀏覽器列表確定需要哪些供應商前綴。最簡單的方法是在package.json中將其定義為“browserslist”數組。以下示例在任何瀏覽器至少佔有2%的市場份額時添加供應商前綴：

<code>npm run css:dev</code>

您的第一個構建

您通常會擁有一個單一的根Sass .scss文件，該文件導入所有必需的部分/組件文件。例如：

<code>npm run css:watch</code>

可以通過運行npx postcss，然後是輸入文件、--output文件和任何必需的選項來啟動編譯。例如：

<code>npm run css:build</code>

此命令：

  1. 解析./src/scss/main.scss
  2. 輸出到./build/css/main.css
  3. 將NODE_ENV環境變量設置為development
  4. 輸出外部源映射文件
  5. 設置詳細輸出和錯誤消息
  6. 設置postcss-scss Sass解析器，以及
  7. 使用插件postcss-advanced-variables、postcss-nested和autoprefixer來處理部分、變量、混合、嵌套和自動前綴

或者，您可以添加--watch，以便在修改.scss文件時自動編譯。

創建PostCSS配置文件

對於較長的插件列表，命令行很快就會變得難以處理。您可以將其定義為npm腳本，但PostCSS配置文件是一個更簡單的選項，它提供了其他可能性。

PostCSS配置文件是名為postcss.config.js的JavaScript模塊文件，通常存儲在項目的根目錄（或您從中運行PostCSS的任何目錄）中。該模塊必須導出單個函數：

<code>npm install -g sass</code>

它傳遞一個cfg對象，該對象具有由postcss命令設置的屬性。例如：

<code>sass [input.scss] [output.css]</code>

您可以檢查這些屬性並相應地做出反應——例如，確定您是在開發模式下運行以及是否正在處理.scss輸入文件：

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

該函數必須返回一個對象，其屬性名稱與postcss-cli命令行選項匹配。以下配置文件複製了上面使用的長快速啟動命令：

<code>"browserslist": [
  "> 2%"
],</code>

現在可以使用更短的命令運行PostCSS：

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

以下是一些需要注意的事項：

  • --verbose是可選的：它未在postcss.config.js中設置。
  • 只有當輸入是.scss文件時，才會應用Sass語法解析。否則，它默認為標準CSS。
  • 只有當--env設置為development時，才會輸出源映射。
  • 仍然可以添加--watch以進行自動編譯。

如果您更喜歡將postcss.config.js放在另一個目錄中，則可以使用--config選項引用它——例如--config /mycfg/。在示例項目中，上面的配置位於config/postcss.config.js中。通過運行npm run css:basic來引用它，該命令調用：

<code>npm run css:dev</code>

添加更多插件

以下部分提供了一些PostCSS插件的示例，這些插件可以解析額外的.scss語法或提供超出Sass編譯器範圍的處理功能。

使用設計令牌

設計令牌是一種與技術無關的方式來存儲變量，例如公司範圍內的字體、顏色、間距等。您可以將令牌名稱-值對存儲在JSON文件中：

<code>npm run css:watch</code>

然後在任何Web、Windows、macOS、iOS、Linux、Android或其他應用程序中引用它們。

Sass不直接支持設計令牌，但是可以將具有variables屬性的JavaScript對象（該屬性保存名稱-值對）傳遞給現有的postcss-advanced-variables PostCSS插件：

<code>npm run css:build</code>

該插件將所有值轉換為全局Sass $變量，這些變量可以在任何部分中使用。可以設置回退值以確保即使令牌中缺少變量，該變量也可用。例如：

<code>npm install -g sass</code>

然後可以在任何.scss文件中引用令牌變量。例如：

<code>sass [input.scss] [output.css]</code>

在示例項目中，定義了一個token.json文件，在運行npm run css:dev時加載並使用該文件。

添加Sass Map支持

Sass Map是鍵值對象。 map-get函數可以按名稱查找值。

以下示例將媒體查詢斷點定義為Sass map，並使用respond mixin來獲取命名值：

<code>npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer</code>

然後可以在同一選擇器中定義默認屬性和媒體查詢修改。例如：

<code>"browserslist": [
  "> 2%"
],</code>

編譯為CSS：

<code>// 根Sass文件
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// 等。</code>

postcss-map-get插件添加了Sass map處理。使用以下命令安裝它：

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --map \
    --verbose \
    --parser postcss-scss \
    --use postcss-advanced-variables postcss-nested autoprefixer</code>

然後將其添加到postcss.config.js：

<code>// postcss.config.js
module.exports = cfg => {

  // ... 配置 ...

};</code>

添加媒體查詢優化

由於我們添加了媒體查詢，因此將它們組合併按移動優先順序排序將很有用。例如，以下CSS：

<code>{
  cwd: '/home/name/postcss-demo',
  env: 'development',
  options: {
    map: undefined,
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/name/postcss-demo/src/scss',
    basename: 'main.scss',
    extname: '.scss'
  }
}</code>

可以合併為：

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  // ... 配置 ...

};</code>

這在Sass中是不可能的，但可以使用PostCSS postcss-sort-media-queries插件實現。使用以下命令安裝它：

<code>// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')(),
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

然後將其添加到postcss.config.js：

<code>npx postcss ./src/scss/main.scss \
    --output ./build/css/main.css \
    --env development \
    --verbose</code>

添加資產處理

Sass中不提供資產管理，但postcss-assets使其變得容易。該插件解析CSS圖像URL，添加緩存清除，定義圖像尺寸，並使用base64表示法內聯文件。例如：

<code>npx postcss src/scss/main.scss \
    --output build/css/main.css \
    --env development \
    --verbose \
    --config ./config/</code>

編譯為：

<code>{

  "font-size": "16px",

  "font-main": "Roboto, Oxygen-Sans, Ubuntu, sans-serif",
  "lineheight": 1.5,

  "font-code": "Menlo, Consolas, Monaco, monospace",
  "lineheight-code": 1.2,

  "color-back": "#f5f5f5",
  "color-fore": "#444"

}</code>

使用以下命令安裝插件：

<code>// PostCSS配置
module.exports = cfg => {

  // 将令牌导入为Sass变量
  const variables = require('./tokens.json'); // 新的

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss';

  return {

    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,
    plugins: [
      require('postcss-advanced-variables')({ variables }), // 已更新
      require('postcss-nested')(),
      require('autoprefixer')()
    ]

  };

};</code>

然後將其添加到postcss.config.js。在這種情況下，該插件被指示在src/images/目錄中查找圖像：

<code>// 如果tokens.json中未设置“color-back”值，则将默认背景颜色设置为#FFF
$color-back: #fff !default;</code>

添加壓縮

cssnano設定了CSS壓縮的標準。壓縮可能比其他插件需要更多處理時間，因此只能在生產中應用。

使用以下命令安裝cssnano：

<code>body {
  font-family: $font-main;
  font-size: $font-size;
  line-height: $lineheight;
  color: $color-fore;
  background-color: $color-back;
}</code>

然後將其添加到postcss.config.js。在這種情況下，只有當NODE_ENV設置為development以外的任何內容時才會進行壓縮：

<code>npm run css:dev</code>

將--env設置為prodution會觸發壓縮（並刪除源映射）：

<code>npm run css:watch</code>

在示例項目中，可以通過運行npm run css:build來編譯生產CSS。

遷移到PostCSS？

PostCSS是一個功能強大且可配置的工具，可以編譯.scss文件並增強（或限制）標準Sass語言。如果您已經在使用PostCSS進行Autoprefixer，則可以完全刪除Sass編譯器，同時保留您喜歡的語法。

更多鏈接：

  • Sass語言參考
  • PostCSS主頁
  • PostCSS插件列表
  • PostCSS插件的可搜索目錄
  • npmjs.com上的PostCSS插件
  • 編寫PostCSS插件
  • PostCSS CLI

關於PostCSS的常見問題

什麼是PostCSS？ PostCSS是使用JavaScript插件轉換樣式的工具。它通常用於Web開發中，使用各種插件處理CSS，以增強和擴展標準CSS的功能。

PostCSS與Sass或Less等傳統CSS預處理器有何不同？與傳統預處理器不同，PostCSS本身不是預處理器，而是一個使用插件轉換CSS的工具。它允許開發者通過僅選擇特定項目所需的插件來使用模塊化和可定制的方法。

PostCSS的一些常見用例是什麼？ PostCSS通常用於自動前綴、代碼檢查、壓縮、變量替換和未來CSS語法兼容性等任務。它提供了一個靈活且模塊化的系統，用於增強標準CSS的功能。

如何為我的項目安裝和設置PostCSS？您可以使用npm（Node Package Manager）安裝PostCSS及其插件。安裝後，您需要創建一個配置文件（通常名為postcss.config.js）來定義項目的插件及其設置。

什麼是自動前綴，為什麼它在PostCSS中很有用？自動前綴是一個過程，其中PostCSS會自動為CSS屬性添加供應商前綴，以確保與不同瀏覽器的兼容性。這有助於開發者編寫更簡潔的代碼，避免手動包含特定於供應商的前綴。

我可以將PostCSS與Sass或Less等預處理器一起使用嗎？是的，PostCSS可以與Sass或Less等預處理器一起使用。您可以通過使用PostCSS插件進一步處理預處理器的輸出，從而利用兩者的優勢。

以上是如何使用PostCSS作為SASS的可配置替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript ruby 架构 json css less gulp scss npm sass postcss webkit webpack sort Token 预处理器 栈 堆 map JS 对象 选择器 github windows macos android ios linux
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何設置CSS的邊距和填充，以及涼爽的佈局技巧下一篇：暫無

相關文章

看更多