＜ CSS中自定义属性值（变量） ＞

---

前言

在前端开发中，我们时常需要用到CSS样式来对页面进行装饰，但是往往在开发一个页面的时候，很多属性值常量是重复使用的，特别是当需要实现换肤功能时，往往需要定义很多属性值，如： 颜色、背景、字体大小、字体样式、图片地址、宽高等等。

那么我们是否有能够减少这种累赘庸余的现象发生呢？答案是有的，除了我们平时Vue开发中，用到的Less、scss、Sass等预编译，它们都带有可以自定义变量属性值的功能，这些功能的使用说明都能在其各自的官网中查阅到，就不做过多阐述。但是我们能否不依赖于预编译，实现CSS变量的定义呢？ 接下来让我们一起看看…

---

提示：以下是本篇文章正文内容，下面案例仅供参考

CSS变量（自定义属性值）语法

具体使用说明及需要注意的内容如下：

{
	// 定义变量，CSS变量和JS中let定义的变量差不多，有其作用域。
	// 定义变量： 用双横线，--来定义变量名， --varName: VarVal
	// 使用变量： 使用 var(--varName, 默认值)； var函数 可以传两个值，第一个为 所要使用的变量名，第二个为当使用的变量失效时的默认值。
	
	--bgColor: red;
	div {
		--divBgColor: orange;
		--errVar_1: ora nge;
		--errVar_2: 'orange';
		--errVar_3: ora'nge;
	}
	
	// 使用变量
	div .divBox {
		// 生效
		background-color: var(--divBgColor);
		// 以下均无法生效，因为在CSS变量（自定义属性值）中，无法处理空格、引号等大部分符号，对字母大小写敏感
		color: var(--errVar_1, red);
		color: var(--errVar_2, red);
		color: var(--errVar_3, red);
	}
	.noDiv {
		// 这里的字体颜色将为空，无法获取没有定义的属性值，作用域超出范围了
		color: var(--divBgColor);
		// 生效
		background-color: var(--bgColor);
	}
}

提示： 在定义CSS变量中，需要注意的是，CSS变量无法处理空格、引号等符号，且对字母大小写敏感。所以在定义变量值时，需要注意区分，如： orange 和 Orange就不是同样的值，具体案例如上。

总结

在CSS中，灵活使用自定义变量，能够有效的减少代码庸余，使CSS样式更便于维护。在使用中，需要注意变量值格式，注意大小写、符号 及 空格的处理，避免出现值失效的情况。