项目场景
我们常在项目里见到这种写法。
<template>
<div
id="dashboardLayout"
:style="styleCSSVariable"
></div>
</template>可以看到，根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是：
get styleCSSVariable() {
return createDashboardCSS(this.dashboard.setting.style);
}这里可以根据当前仪表盘的用户设置风格（如“暗黑”、“科技”、“酷炫”）进行css样式管理。return了诸如这些设置：
return {
// 文字颜色
'--font': '#cccccc',
'--font-sub': '#999999',
'--font-info': '#666666',
// 辅助文字
'--font-color-secondary': '#aaaaaa',
// 提示性文字
'--font-color-info': '#ff2d2d',
'--font-active-light': '#ffffff',
// 删除按钮/文字
'--delete': '#fe5959',
// 警示色
'--warning': '#ff9900',
// 操作成功
'--success': '#19be6b'
....
}
可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。
CSS变量
CSS变量（var）是CSS3新增加的一项功能，它可以让我们在样式表中定义一个变量，然后在样式表中的其他地方使用这个变量，从而实现样式的复用。
CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
Var()函数
var(name)background-color: var(--font-active);
var() 函数用于获取插入 CSS 变量的值。当然你也可以用var(name,val)，val为获取不到var(name)时返回的默认值
全局变量
写在HTML文档的根元素上面的，我们用伪类选择器来:root获取。
在每个HTML文档中，只有一个根元素，通常是标签。
<!DOCTYPE html>
<html />
<head />
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
</style>局部变量
如项目中的例子，你可以选择一个容器元素进行注入
<style>
#dashboardLayout {
--blue: #1e90ff;
--white: #ffffff;
}
</style>或者像刚才案例通过JS或Vue进行注入，只要绑定到它的style上就行。
局部变量只能在容器内部里获取到css变量值，而全局则是整个页面里的元素都能获取。
css里获取CSS绑定的CSS变量值
.component h1 {
color: var(--blue)
}JS里获取CSS绑定的CSS变量值
需要借助Window.getComputedStyle方法返回制定元素的CSS熟悉对象
<html lang="en">
<body>
<div class="own" id="own">
</div>
</body>
</html>
<style>
.own {
--ownColor: '#fffff';
font-size: 16;
}
</style>
<script>
let elem1 = document.getElementById("own");
var valObj = window.getComputedStyle(elem1);
console.log(valObj)
console.log(valObj['ownColor'])
console.log(valObj.getPropertyValue('--ownColor'))
</script>注意，传入getComputedStyle是确切的元素对象。返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。
那么可以看到这个对象是一个类数组对象。假如我们心急地直接用valObj['ownColor']来获取css变量值，那么返回的肯定是undefined。此时需要借助另外一个函数
CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ，其中包含请求的 CSS 属性的值
如果在Vue+ts的环境里，我们应该如何优雅书写这个方法？
const skinColor = getSkin('--font-sub');/**
* 获取全局颜色
* @param {*} key
* @returns
*/
export function getSkin(key) {
// 找到根部容器或局部容器
const dom = document.querySelector('#dashboardLayout');
return getComputedStyle(
// 顶部容器不存在，则选择网页文档根元素
dom ? dom : document.documentElement,
).getPropertyValue(key);
}/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle) */
declare function getComputedStyle(elt: Element, pseudoElt?: string | null): CSSStyleDeclaration;
declare var CSSStyleDeclaration: {
prototype: CSSStyleDeclaration;
new(): CSSStyleDeclaration;
};