CSS 自定义属性（CSS 变量）的用法和优势？

:root {
  --primary-color: #4f46e5;
  --text-size: 16px;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  font-size: var(--text-size);
  padding: var(--spacing);
}

/* 带回退值 */
.text { color: var(--undefined-var, #333); }

// 读取
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color')

// 设置
document.documentElement.style.setProperty('--primary-color', '#ff0000')

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --border: #e0e0e0;
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #ffffff;
  --border: #333333;
}

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

// 切换主题
function toggleTheme() {
  const current = document.documentElement.dataset.theme
  document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark'
}

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

/* 所有使用 var(--font-size) 的地方自动响应 */

.card {
  --card-padding: 16px;
  --card-bg: #fff;
  padding: var(--card-padding);
  background: var(--card-bg);
}

.card--highlight {
  --card-bg: #fffbeb;  /* 仅影响此组件 */
}