在CSS3中及VUE中使用 var() 和 八位十六进制的颜色值

在CSS3中及VUE中使用 var() 和 八位十六进制的颜色值

最近因为项目(vue)需求的改动，需要根据后天返回的数据来动态的去改变一些样式。 刚开始也没有什么好的方法，想过样式的绑定，但是不行。想过使用 Jquery 来改变， 虽然可以，但是感觉太麻烦，而且有时候不太稳定。

最后，发现可以使用CSS3中的 var() 来声明变量来使用。 var()是CSS3中的一个函数。定义：var()函数用于插入自定义的属性值。如果一个属性值在在多处被使用，该方法就很有用。 在了解了CSS3中的var()函数后，我还是很关心它的浏览器兼容性是如何的。

　　

可以从MDN官方给出的数据中知道，这个CSS3中的var函数除了 IE 中不支持外，其他的浏览器除了版本极低的情况，都很好的支持了。 用法也很简单：1、变量在声明时必须以 -- 开头。2、后面可以跟自定义属性名。3、在var()使用自定义的属性名。

在vue中用法类似，但vue可以同过样式绑定的方式来声明变量。
　　
这样就可以动态的去改变一些样式，也不需要使用 Jquery。而且还可以多处使用。

---

但是有时候，这样也不能满足需求，比如：如果给你的是十六进制的颜色值，但是在一些地方却需要有一定的透明度。 可以将十六进制的颜色制颜色值转化为rbga(或者有需要可以转化为rgb)。如果能不转化最好。 这里就需要用到 八位十六进制的颜色值

这是6位十六进制的颜色值　　

　　

这是8位十六进制的颜色值

很明显，可以看出8位十六进制的颜色值的最后两位代表了透明度，值越小，越透明，值不能为100。

最后还有个坑，就是 IE 不支持这种写法。所以，如果真的要兼容IE就把 这种的写法转化为rgba的形式。
      
      这里的透明度是写成了固定的0.1，可以修改为动态的，多传个参数透明度就行了。