CSS变量使用

CSS变量使用

CSS自定义属性（通常称为CSS变量）是现代CSS中一项强大的功能，它允许开发者定义可重用的值，并在整个样式表中引用这些值。CSS变量提高了代码的可维护性、灵活性和可读性，尤其适用于大型项目或主题切换等场景。

基本概念

CSS变量是带有前缀`--`的自定义属性，其值可以在整个文档中重复使用。它们的作用域遵循CSS层叠规则，并可以通过`var()`函数引用。

定义变量

CSS变量通常在根选择器（`:root`）中定义，使其成为全局变量。也可以在特定选择器中定义，形成局部变量。

:root {
  --primary-color: #3498db;
  --spacing-unit: 16px;
}

.container {
  --container-padding: 20px;
}

使用变量

通过`var()`函数调用变量值。如果变量未定义，可以指定一个备用值。

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  margin: var(--non-existent-var, 10px); /* 使用备用值 */
}

作用域与继承

CSS变量遵循标准继承规则。全局变量定义在`:root`中，而局部变量仅在其选择器及其子元素中有效。

graph TD A[:root] -->|定义全局变量| B[所有元素] C[.container] -->|定义局部变量| D[.container及其子元素]

示例：作用域演示

:root {
  --global-var: red;
}

.box {
  --local-var: blue;
  color: var(--local-var);
  border: 1px solid var(--global-var);
}

.child {
  color: var(--local-var); /* 继承父级变量 */
}

动态更新与JavaScript交互

CSS变量可以通过JavaScript动态修改，实现运行时样式调整。

// 获取根元素
const root = document.documentElement;

// 修改变量值
root.style.setProperty('--primary-color', '#e74c3c');

// 读取变量值
const color = getComputedStyle(root).getPropertyValue('--primary-color');

实际应用案例

案例1：主题切换

通过修改变量值快速切换整个网站的主题色。

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: #222;
  --text-color: white;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

案例2：响应式间距

使用变量统一管理不同屏幕尺寸下的间距。

:root {
  --spacing: 8px;
}

@media (min-width: 768px) {
  :root {
    --spacing: 16px;
  }
}

.card {
  margin: var(--spacing);
}

数学计算

CSS变量可以与`calc()`结合实现动态计算。

<syntaxhighlight lang="css">

root {

 --base-size: 10px;

}

.text {

 font-size: calc(var(--base-size) * 1.5);

} </math>

注意事项

1. 变量名区分大小写：`--color`和`--Color`是不同的变量 2. 避免使用CSS保留字作为变量名 3. 旧版浏览器（如IE11）不支持CSS变量 4. 过度使用可能降低代码可读性

总结

CSS变量极大地提升了样式表的灵活性和可维护性。通过合理使用变量作用域、动态更新和数学计算，开发者可以创建更加模块化、适应性更强的CSS代码。初学者应从简单的颜色和尺寸变量开始，逐步掌握更高级的用法。