CSS变量与自定义属性

🧩 第五章：CSS 变量与自定义属性

🎯 一、重点知识与细节

1️⃣ CSS 自定义属性（CSS Variables）

  • 定义：
:root {
  --primary-color: #09f;
  --font-size-base: 16px;
}
  • 使用：
button {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
}

细节：

  • 可以提供默认值：
color: var(--text-color, black);

  • 作用域：

    • 在 :root 全局定义 → 整个页面可用
    • 在局部元素定义 → 仅对子元素有效

2️⃣ 变量的动态主题切换

[data-theme="dark"] {
  --primary-color: #f06;
  --background-color: #111;
}

body {
  background: var(--background-color);
  color: var(--primary-color);
}
  • 利用 JS 切换 data-theme：
document.documentElement.setAttribute('data-theme', 'dark');

3️⃣ 与 calc()、min()、max()、clamp() 结合

  • 动态计算尺寸或间距：
h1 {
  font-size: calc(var(--font-size-base) * 2);
}

.container {
  width: min(80%, 1200px);
  padding: clamp(1rem, 2vw, 2rem);
}

  • 解释：

    • calc(): 基于变量和单位运算
    • min()/max()/clamp(): 响应式、自适应范围控制

4️⃣ color-mix() 与现代色彩处理（CSS Color Module Level 5）

  • 混合两种颜色：
:root {
  --primary: #09f;
  --secondary: #f06;
  --primary-mix: color-mix(in srgb, var(--primary) 70%, var(--secondary) 30%);
}

.button {
  background-color: var(--primary-mix);
}
  • 可用于主题渐变、按钮 hover 色彩变化等。

5️⃣ CSS 自定义属性注意事项

  • 性能：

    • 不会触发布局重绘，值变化仅影响使用它的属性

  • 继承：

    • 默认可继承到子元素
    • 可在局部覆盖，不影响全局其他元素

  • 限制：

    • 不能用于 @keyframes 的动画百分比值
    • 只能应用于支持 CSS 值的属性（width, color, margin…）

6️⃣ 响应式主题和组件化

  • 在组件化开发中，CSS 变量可用于：

    • 组件主题色：
    .card {
  --card-bg: white;
  background: var(--card-bg);
}
    • 响应式布局：
    :root {
  --gap: clamp(0.5rem, 2vw, 2rem);
}
.grid {
  gap: var(--gap);
}

✅ 二、开发 Checklist

类别检查点
变量定义是否全局统一命名，局部覆盖合理
默认值使用 var(--name, fallback) 防止 undefined
主题切换利用 data-theme 或 class 切换变量，支持动态主题
计算单位结合 calc(), clamp(), min(), max() 提高响应式适应性
颜色处理使用 color-mix() 优化主题和 hover 效果
继承与作用域确保组件内变量不会意外污染全局
可维护性命名规范、注释清晰、易读易修改
动画兼容避免在 @keyframes 中直接使用自定义变量百分比

下一步推荐整理 现代 CSS 特性与模块化架构 章节， 包含：:has(), @layer, @scope, subgrid, container queries, Utility-first / BEM 等， 这是 2025 年 CSS 高级开发与大型项目管理的核心技能。

你希望我继续整理吗？