CSS3 变量var()是什么？怎么使用

CSS 变量（又名自定义属性）已在 WEB 浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解。

对于一个大型项目，不同的 CSS 文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。

使用 CSS 变量，可以更快的解决这个问题。定义变量名需要用 — 开头 。首先，我们现在将在 :root 或元素中定义变量。

命名变量

与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。

/* 合法命名 */

:root {

--primary-color: #222;

--_primary-color: #222;

--12-primary-color: #222;

--primay-color-12: #222;

}

/* 非法命名 */

:root {

--primary color: #222; /* Spacings are not allowed */

--primary$%#%$#

}

作用域

CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例：

:root {

--primary-color: #235ad1;

}

.section-title {

--primary-color: d12374;

color: var(--primary-color);

}

变量 –primary-color 是全局变量，可以从文档中的任何地方访问。变量 –primary-color 由于是在 .section-title 定义的，所以只能在 .section-title 中访问。