B34. CSS 变量

1.1. CSS 变量：网页的调色盘与模板

为什么设计师总说「颜色要统一」？用CSS变量就像给网页配一个智能调色盘！改一个变量，全站颜色瞬间同步——再也不用大海捞针找代码了！

1.1.1 基础语法

/* 在根元素定义全局变量 */
:root {
  --primary-color: #4a90e2;    /* 主色调 */
  --spacing: 16px;             /* 基础间距 */
}

/* 在其他地方使用变量 */
.header {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

⚠️易错点：变量名必须以双连字符开头（--），且定义时不用var()，使用时才用！

1.1.2 作用域与覆盖

/* 局部变量覆盖全局 */
.article {
  --primary-color: #ff6b6b;    /* 仅在.article内生效 */
  color: var(--primary-color);
}

1.1.3 动态计算

/* 变量支持数学运算 */
:root {
  --base: 10px;
}

.box {
  width: calc(var(--base) * 3);  /* 30px */
  height: calc(var(--base) + 20px); /* 30px */
}

1.2. 变量的动态魔法

为什么你的暗黑模式切换卡顿？CSS变量+JS能让你的网页像变魔术一样切换主题！

1.2.1 通过JS修改变量

// 修改全局变量
document.documentElement.style.setProperty('--primary-color', '#00ff00');

// 修改局部变量
document.querySelector('.header').style.setProperty('--header-bg', '#333');

1.2.2 响应式设计

/* 根据屏幕尺寸改变量 */
@media (max-width: 600px) {
  :root {
    --spacing: 8px;
  }
}

1.3. 变量与过渡的完美配合

想让按钮点击时颜色平滑变化？CSS变量+过渡就是你的最佳拍档！

.button {
  --button-bg: #ff9a9e;
  background: var(--button-bg);
  transition: 0.3s;
}

.button:hover {
  --button-bg: #fad0c4;
}

⚠️技巧：通过修改变量值触发过渡，比直接改属性更优雅！

1.4. 实战案例：主题切换器

三步实现类似微信的「深色模式」！

<!-- HTML -->
<button id="toggle">切换主题</button>

```css
/* CSS */
:root {
  --bg: #fff;
  --text: #333;
}

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

.dark-mode {
  --bg: #333;
  --text: #eee;
}

// JS
document.getElementById('toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

知识回顾

1. 变量定义在:root是全局作用域，局部定义可覆盖
2. 使用var(--变量名)引用变量，支持计算和动态修改
3. 通过JS的setProperty或CSS媒体查询实现动态效果
4. 变量与过渡结合能实现更优雅的动画效果

课后练习

1. （选择）以下哪个是合法的CSS变量名？

   • A. @primary-color
   • B. --primary-color
   • C. #primary-color
   • D. primary_color

2. （填空）补全代码定义红色主题：

   :root { --theme: ______; }

3. （纠错）找出错误：

   .box {
     --width: 100px;
     width: var(--width * 2);  /* 错误！ */
   }

4. 实现天气卡片的「晴/雨模式」切换：

   • 晴天模式：背景渐变从 var(--sun-bg) 到 var(--sky-bg)
   • 雨天模式：背景渐变从 var(--cloud-bg) 到 var(--rain-bg)
   • 点击按钮切换模式，使用CSS变量和过渡效果

5. 设计一个可配置的按钮库：

   • 通过变量控制颜色、圆角、阴影等属性
   • 提供「默认/成功/警告」三种主题
   • 使用CSS变量实现主题一键切换