如何使用PostCSS作為SASS的可配置替代品-css教學-PHP中文網

首頁

web前端

css教學

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

Lisa Kudrow

Feb 12, 2025 am 08:24 AM

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語言包含大量功能，包括變量、嵌套、部分、混合等。但也有一些缺點：

您無法輕鬆添加新功能。

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

您可能更希望您的團隊不使用嵌套或@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>

此命令：

解析./src/scss/main.scss
輸出到./build/css/main.css
將NODE_ENV環境變量設置為development
輸出外部源映射文件
設置詳細輸出和錯誤消息
設置postcss-scss Sass解析器，以及
使用插件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以外的任何內容時才會進行壓縮：