CSS变量和自定义属性深度解析

第3章: CSS变量和自定义属性深度解析

🎯 本章重点

• CSS变量的定义和使用
• 动态主题切换实现
• 变量与JavaScript交互

📖 内容概述

3.1 基础语法

变量定义

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing: 1rem;
  --border-radius: 8px;
}

变量使用

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

3.2 变量作用域

全局作用域

:root {
  --global-color: #ff6b6b;
}

.element {
  color: var(--global-color);
}

局部作用域

.container {
  --local-size: 200px;
  width: var(--local-size);
}

/* 其他元素无法访问 --local-size */

3.3 默认值和回退

.element {
  /* 如果 --custom-color 未定义，使用 #ccc */
  color: var(--custom-color, #ccc);
  
  /* 多重回退 */
  margin: var(--spacing, var(--default-spacing, 1rem));
}

3.4 动态主题切换

CSS变量定义主题

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
  --accent-color: #007bff;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #ffffff;
  --accent-color: #4ecdc4;
}

应用主题

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

.button {
  background-color: var(--accent-color);
}

3.5 与JavaScript交互

获取和设置变量

// 获取变量值
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// 设置变量值
document.documentElement.style.setProperty(
  '--primary-color', 
  '#ff6b6b'
);

主题切换函数

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

3.6 高级用法

计算动态值

:root {
  --base-size: 16px;
  --scale: 1.2;
  
  --size-1: calc(var(--base-size) * var(--scale));
  --size-2: calc(var(--size-1) * var(--scale));
  --size-3: calc(var(--size-2) * var(--scale));
}

响应式变量

:root {
  --spacing: 1rem;
}

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

3.7 实战案例

组件变量系统

.card {
  --card-padding: 1.5rem;
  --card-border-radius: 12px;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
}

.card--large {
  --card-padding: 2rem;
  --card-border-radius: 16px;
}

💡 最佳实践

1. 命名规范: 使用有意义的变量名
2. 组织变量: 按功能或组件分组
3. 提供默认值: 确保优雅降级
4. 响应式设计: 结合媒体查询使用

🎯 下一章预览

下一章将深入探讨Flexbox布局的实战应用。

---

最后更新: 2024年12月