28、混合预处理器：从SASS过渡到PostCSS的实用指南

混合预处理器：从SASS过渡到PostCSS的实用指南

1. 迈出第一步

在开发网站时，开发者通常有机会从头开始设计和构建网站，能够决定网站的配色方案、结构和整体外观。但有时，我们想采用新技术，却不得不基于现有网站进行开发。这时很多人心中会有疑问：从哪里开始呢？这当然取决于很多因素，其中一个可能是网站是否已经在使用SASS或Less等预处理器。

PostCSS的灵活性和强大功能使我们能够轻松地从Less或SASS过渡到使用PostCSS。接下来，我们将探索一些从SASS过渡到PostCSS的技巧。

2. 探索转换过程

之前我们编写的处理器插件都是基于纯PostCSS的，无法编译原始的SASS代码。我们简单了解过CSStyle库，它是一个基于BEM原则生成简洁代码的优秀库，但要求代码采用特定格式编写。然而，要将一个大型复杂的电子商务网站重写为使用CSStyle，需要大量的工作和漫长的过渡期，不太现实。

更实际的解决方案是：
- 引入任务运行器来编译现有的预处理器代码。例如，在Gulp或Broccoli等运行器中使用SASS或Less等库的插件来编译代码。
- 过渡到使用任务运行器后，引入处理核心流程的插件，如管理浏览器前缀、创建源映射和压缩样式表。
- 将现有的样式表拆分成更小的块，并在编译时将每个块导入到主文件中。然后将每个块转换为使用PostCSS插件，以复制现有预处理器的功能。例如，使用postcss - simple - vars创建新变量来替换现有的基于SASS的变量。

以下是一个使用SASS和Gulp的任务文件示例：