作者: 陈云杰
在做前端样式的时候经常需要用到各种项目中定义的变量（sass/less/css3），但一般设计稿上只会有颜色值，这个时候经常需要到变量定义文件里去反查一下获取变量名，这个过程挺机械的，所以想着有没有自动化的办法去解决，于是做了这个vscode扩展，我自己使用了一两年了，感觉能提高效率，让编写css的过程更加流畅，推荐给大家。
效果展示
录制了一个替换颜色变量的视频：
原理也很简单：
- 读取指定变量定义文件，用正则表达式匹配出所有的变量名和对应的值，形成一个字典
- 用正则表达式匹配当前行内容的颜色和尺寸字符串，在字典中查出对应的变量名
- 用 vscode 的 quickfix api（小灯泡）给出提示，可以点击小灯泡或者快捷键执行变量名替换
安装
marketplace.visualstudio.com/items?itemN…
配置
设置一下项目里变量申明文件的路径就可以了，其他选项都是可选的
"cssAction.variablesFile": "src/style/variables.scss",
代码是开源的:
