CSS变量（自定义属性）详解

一、什么是CSS变量
CSS变量（官方名称：自定义属性）是CSS中用于存储可重用值的实体，通过--前缀定义。它允许你在一个地方管理重复使用的值，并在整个文档中通过var()函数引用。

二、基本语法和用法

1. 定义变量：

/* 在根元素定义全局变量 */
:root {
  --primary-color: #007bff;
  --spacing-unit: 16px;
  --main-font: "Arial", sans-serif;
}

/* 在特定元素内定义局部变量 */
.container {
  --border-radius: 8px;
}

2. 使用变量：

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius, 4px); /* 第二个参数为备用值 */
}

三、CSS变量的核心特性

1. 作用域规则：

   • 全局变量在:root中定义，所有元素都可访问
   • 局部变量在特定选择器内定义，只有该元素及其子元素可访问

   .theme-dark {
     --bg-color: #333;
     --text-color: white;
   }
   
   .theme-light {
     --bg-color: white;
     --text-color: #333;
   }
   

2. 继承性：

   • 变量遵循CSS继承规则
   • 子元素会继承父元素中定义的变量值

3. 备用值处理：

   /* 如果--secondary-color未定义，则使用#ccc */
   color: var(--secondary-color, #ccc);
   
   /* 多层备用值 */
   color: var(--undefined-var, var(--fallback-var, red));
   

五、实际应用示例

1. 主题切换：

:root {
  --primary: blue;
  --background: white;
}

[data-theme="dark"] {
  --primary: lightblue;
  --background: black;
}

body {
  background: var(--background);
  color: var(--primary);
  transition: all 0.3s ease; /* 添加过渡效果 */
}

2. 响应式间距系统：

:root {
  --spacing: 8px;
}

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

.card {
  margin: calc(var(--spacing) * 2);
  padding: var(--spacing);
}

六、最佳实践和注意事项

1. 命名规范：使用有意义的名称，如--header-height而非--hh
2. 单位处理：带单位的变量定义时包含单位，使用时直接引用
3. 浏览器支持检测：

@supports (--css: variables) {
  /* 支持CSS变量的样式 */
}

4. 与预处理器变量区别：
   • CSS变量是运行时的，可以在JavaScript中动态修改
   • 预处理器变量在编译时就被固定值替换