CSS的var变量

CSS 变量 Var 语法和用法特性

CSS 原生的变量语法是：--*，变量使用语法是：var(--*)，其中*表示变量名称。例如

:root {
	--primary-color: #eeeeee;
}
.theme {
	background-color: var(--primary-color);
}

以上代码表示·theme的背景色为#eeeeee

CSS 变量不能包含$,[,^,(,%等字符，普通字符只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_和横线-”这些组合，也可以是中文，日文等
CSS 变量拥有原生变量的所有属性，如果想用全局变量可以设置变量在:root选择器上，当存在多个同名变量时，变量的覆盖规则由 CSS 选择器的权重决定，但是并没有!import这种用法
CSS 变量不支持以下写法：

1	{ --primary-color: background; var(--primary-color): #eeeeee }

CSS 变量不支持同时声明多个变量

如果需要带单位，则需要使用calc()函数，例如：

.box {
	--primary-font-size: 20;
	/* 无效 */
	font-size: var(--primary-font-size)px;
	/* 有效 */
	font-size: calc(var(--primary-font-size) * 1px)
}

CSS 变量使用的完整语法：

var(<custom-property-name> [, <declaration-value>]?)，用中文表示就是：var(<自定义属性名> [,<默认值]?)，其意义为如果我们使用的变量没有定义，则使用后面的值作为元素的属性值。例如：

.box {
	--primary-color: #eeeeee;
}
.theme {
	background-color: var(--primary-color, #000000)
}

以上代码表示·theme的背景色为#000000

CSS 变量具有相互传递的特性，这使得 CSS 变量可以简化我们的代码和实现成本，尤其是在我们编写响应式变化的时候，在媒体查询的条件下我们只需要改变一个 CSS 属性值就可以了

我们可以使用element.setProperty的方式对变量值进行动态修改，例如：

const dom = document.documentElement;
   const { style } = dom;
   const colors = "--primary-color";
   function changeColor() {
       const primaryColor = getComputedStyle(dom).getPropertyValue(colors);
       // 格式化后样式有空格
       if (primaryColor.includes("#eeeeee")) {
         style.setProperty(colors, "#000000");
       } else {
         style.setProperty(colors, "#eeeeee");
       }
     }

IE 浏览器不支持 CSS 变量