var() 是 CSS 中用于引用和使用自定义属性（也就是 CSS 变量）的一种方法。
通过定义变量，可以将样式中的常用值抽象成一个可复用的变量，从而增强代码的可维护性和可重用性。
1. 定义 CSS 变量
CSS 变量的定义通常在 :root选择器中进行，:root 是文档的根元素（通常是 <html>）。这样定义的变量可以在整个文档中使用。
:root {
--main-color: #3498db; /* 定义一个全局变量 */
--font-size: 16px;
}
2. 使用 CSS 变量
使用 var() 函数来引用变量：
body {
background-color: var(--main-color); /* 使用变量 --main-color */
font-size: var(--font-size); /* 使用变量 --font-size */
}
3. 作用域与局部变量
变量的作用域是有限的。变量可以在任何 CSS 规则中定义，并且其作用范围是从定义位置到文档树中的所有子元素。
/* 定义全局变量 */
:root {
--global-color: #ff6347;
}
/* .container 内部定义局部变量 */
.container {
--container-bg: #2ecc71;
background-color: var(--container-bg); /* 只对 .container 生效 */
}
body {
background-color: var(--global-color); /* 全局使用 */
}
4. 提供默认值
使用 var() 时，可以提供一个默认值。如果变量没有定义或无效，浏览器将使用该默认值。
p {
color: var(--text-color, black); /* 如果 --text-color 未定义，则使用 black */
}
5. 动态修改 CSS 变量
CSS 变量的值可以通过 JavaScript 动态修改。例如：
// 修改 CSS 变量的值
document.documentElement.style.setProperty('--main-color', '#e74c3c');
这行代码会改变全局变量 --main-color 的值，使得整个文档中引用该变量的地方都生效。
6. 示例：使用 CSS 变量实现主题切换
利用 CSS 变量来实现类似主题切换的效果。
/* 默认主题 */
:root {
--primary-color: #3498db;
--background-color: white;
}
/* 暗黑主题 */
[data-theme="dark"] {
--primary-color: #2ecc71;
--background-color: #333;
}
body {
background-color: var(--background-color);
color: var(--primary-color);
}
通过 JavaScript 来切换主题：
// 切换到暗黑主题
document.documentElement.setAttribute('data-theme', 'dark');
// 切换回默认主题
document.documentElement.removeAttribute('data-theme');
7. 总结
-
定义变量：
--variable-name: value;。 -
使用变量：
var(--variable-name);。 -
作用域：CSS 变量的作用域依赖于它们的定义位置。
-
默认值：
var(--variable-name, default-value);。 -
动态更新：可以通过 JavaScript 动态修改变量值。
CSS 变量的优点在于提升了代码的灵活性和可维护性，尤其是在需要全局控制或多次使用相同值的场景下。
