本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载
首先,这里说的迁移并不代表这两个技术的优劣,其次也不代表它们是矛盾不相容的,相反它们搭配使用是很棒的。
如果你打算把 Sass 迁移到 PostCSS,那么在迁移之前有些事是必须要考虑的:
首先统计常用 Sass 功能,查找对应的 PostCSS 插件
一般来说,我们常用的 sass 功能如下:
在查找相应功能插件的时候可以参考precss,同时 PostCSS 插件 版块中也有一个 Sass 的,也可以拿来参考看看。
挑选未来语法的插件: postcss-preset-env (cssnext已经不再维护了,所以不推荐)
以下是我挑选的一些插件,挑选的原则是:优先 CSS 新标准,兼容 Sass 语法,插件之间不冲突。
postcss.config.js
文件将以前的 .scss
后缀改成 .css
后缀,这个过程一般都会遇到一些报错,所以前期建议一个个改,等对报错有了一定程度了解,就可以批量修改试试。
如果你有使用一个基础的 Sass 库(如 sandal),那么首先得迁移这个基础的库,我们的基础库是 sandal,所以搞了一个 sandal-for-postcss。
如果你的目的是平稳过度,且以后使用未来标准语法,那么对于一些基础的变量得使用新的标准语法重新定义一份。
下面是一些我迁移过程中遇到的部分不支持问题:
除此之外,所有的运算都需要使用 calc
来计算,变量默认值的处理可参考 sandal-for-postcss。
最后迁移有风险,中间也会遇到一些坑或坎,请谨慎评估。