如何使用PostCSS作为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中文网其他相关文章！