项目开发中如何灵活使用css变量

div{width:300px;height:300px;margin:auto;text-align:center;line-height:300px;}在项目开发的过程中，我们写了一些相同的css样式，后期维护起来特别不方便。举个栗子：项目主题背景色和字体色调为蓝色，项目已经达到上线版本。这时候产品经理来了，说我们项目下个版本的背景和字体颜色要改成淡紫色。,最晚将于明天部署的版本。这时候开始打开项目搜索有多少地方涉及到这些属性，拼命地一一改。如果我早知道这一点，为什么要费心呢？是我结构小还是产品经理活该？我们一般可以在其他需要的地方把public风格当做变量使用，写上变量名即可。后期维护，我们只需要修改公共变量，设置value值就够了，省去很多重复性的工作，玩游戏，炒股不就好了吗？在css中，我们一般在后缀相似的文件中使用变量。例如：$bgColor:bluediv{background:$bgColor}那么如何在.js,.vue.....文件中使用css变量呢？$pink:#E65D6E;$yellow:#FEC171;:export{yellow:$yellow;pink:$pink}div{width:300px;height:300px;margin:auto;text-align:center;line-height:300px;}直接导入变量文件得到变量对象