[学习笔记]Vue利用css全局变量实现主题风格变换

想要实现的功能：页面渲染前，从后端获取用户的数据，用户数据内含有style值，根据不同的style值动态改变商城的颜色风格。

原本我是只考虑了两个风格，然后在每个页面里做判断，后来考虑到后期可能会添加其他风格，而且这样写代码很乱还不容易维护，所以了解了一下样式的全局变量。

找了大半天less，sass的教程，功能很强大也很复杂，不知道该怎么入手，后来发现直接用css自带的变量功能就可以实现，而且很简单。

具体使用方法参考这个：https://codepen.io/dongCode/pen/jOrBmbG

一、在App.vue内定义好全局变量

:root{
  --style:#579535;
}

这样，项目内的所有vue文件都可以用这个变量了

二、在需要更换颜色的地方直接引用变量

就可以实现啦，想换什么颜色就换什么颜色

三、根据用户数据更改主题颜色

根据用户返回的style值，做判断就好了，然后用下面的代码实现颜色变换的功能

document.documentElement.style.setProperty('--style','color') //--style即为css变量，color为要更改的主题颜色

四、获取变量值

比如我需要对--style变量的颜色做淡化处理，可以用下面代码获取该变量，再进行相应操作

getComputedStyle(document.documentElement).getPropertyValue('--style')