02.CSS变量 (Variables)

@大迁世界2025-12-01 10:00

CSS变量让你能够创建动态的颜色方案和主题，可以在运行时进行更改。

本章概述

CSS变量（也称为CSS自定义属性）是现代CSS中最强大的特性之一。它们允许你定义可重用的值，创建动态主题系统，并大大提高CSS代码的可维护性。

🎯 学习目标

理解CSS变量的基本概念和语法
掌握变量的定义、使用和作用域
学会创建动态主题系统
了解CSS变量的高级应用技巧
掌握浏览器兼容性和最佳实践

CSS变量基础

基本语法

CSS变量使用--前缀定义，通过var()函数使用：

go 复制代码

:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

变量作用域

CSS变量遵循层叠规则，具有作用域概念：

go 复制代码

/* 全局变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

/* 组件级变量 */
.card {
  --card-padding: 1.5rem;
  --card-border-radius: 0.375rem;
  
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 状态变量 */
.card:hover {
  --card-shadow-opacity: 0.2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, var(--card-shadow-opacity));
}

动态主题系统

明暗主题切换

go 复制代码

:root {
  /* 浅色主题（默认） */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #212529;