30、混合预处理器：PostCSS 使用指南与问题排查

混合预处理器：PostCSS 使用指南与问题排查

一、前期准备与基础操作

（一）替换样式表中的值

在处理样式表时，我们需要逐个导入样式表，并将现有的值替换为对应的变量。这是一项必要但繁琐的任务，需要耐心操作。例如，更新字体族的值，但边框值可能还未更改。操作完成后，务必保存每个文件，为后续操作做好准备。为了减少手动更新每个文件的工作量，建议使用编辑器的搜索和替换功能，像 Sublime Text 3 这类编辑器就具备在多个文件中替换文本的实用功能。

（二）添加 rem 单位支持

对于是否使用 rem 单位，开发者们存在不同观点。不过，我们可以利用 PostCSS 自动添加像素回退支持。以下是具体操作步骤：
1. 打开 Node.js 命令提示符会话，如果之前的会话仍可用，可直接使用。
2. 确保工作文件夹设置为项目文件夹的根目录，然后在提示符下输入以下命令并按回车键：

npm install gulp-pixrem --save-dev

3. 等待 Gulp 完成插件的安装，安装完成后再继续后续操作。

安装完成后，我们需要遍历创建的各种样式表，将像素值替换为 rem 等效值。虽然这是一项枯燥但必要的任务，但插件会为代码中找到的任何 rem 单位实例添加像素回退值。我们可以根据需要进行适量的更改，确保代码能够编译，剩余的更改可以逐步完成。

二、样式表的优化技巧

（一）样式嵌套规则

在使用 SAS