css 变量抽离及 vs 插件开发

css 变量抽离

背景

项目背景：公司的代码由于时间比较赶，一些主题样式都是通过直接写值的方式，但是近期 UI 对页面主题进行了大改，导致原有的主题色完全不适用了，但是因为开发人员写的分散，导致不好维护。

mt 给我的任务是将项目样式代码进行抽离，搭建一套主题样式方案，项目包含 vant 组件库样式、sass、tailwind 样式，需要同时对三者处理，实现一套变量完成三种 css 方案的适配。

vant 和 tailwind 如何定义变量

vant 组件可以通过 css 样式来覆盖主题色，也可以通过配置 config-provider 组件来定义 css 变量

tailwind 需要在 tailwind.config.js 中定义颜色变量

方案探究与实现

实现这个主题复用的核心就是去对 vant 和 tailwind 去使用同一个样式变量（定义前景色和背景色、主题色），实现的思路有很多，例如：

1. tailwind 生成的默认 css 变量（--tw-xxx），可以在 vant 中进行复用
2. 写 css 变量，tailwind 复用 css 变量
3. 编写 sass 变量，vant 和 tailwind 都复用 sass 变量（❌ pass）

🔍 方案 3 探究：src/theme/vars.scss 本来是想采用 sass 变量来实现的，在 tailwind 中使用  primary: '$primary'  ，但是这个方案被 pass 掉了，因为 tailwind 本身使用的是静态的 css 变量（如  var(--tw-shadow) ），来实现部分样式控制，但 tailwind 并不直接支持将这些变量映射到 sass 变量中，如果要实现需要通过 postcss 对变量进行提取，开发复杂难度大，所以不考虑这种方案

vs 插件开发

背景

痛点：

1. 新项目需要借助老项目 ui，也就是将老项目 copy 一份，然后进行修改。由于两个项目的主题色是完全不同的，而且之前的代码也没有进行 css 变量的抽离，会导致工作量的提升。
2. 一般情况下，我们会一边在 ui 稿中 copy 颜色，然后到我们的 css 变量文件中去找到对应的变量名，再 copy 到我们的项目，这样的过程非常繁琐且低效。
3. 而且对于变量的使用，新成员不理解是如何定义的变量，这就会导致上手成本变高。

所以开发了一款 vscode 插件（auto css vars），来辅助我们开发，可以选择 rgba 或者 16 进制颜色，去手动替换成 css 变量，也可以做到一键替换。在侧边栏面板也做了颜色预览，可以一键复制或插入。也提供自动补全功能，可以输入“--”去筛选变量。