有没有使用过 CSS 变量？它解决了哪些问题？

CSS 变量（也称为 CSS 自定义属性）是一种强大的 CSS 特性，它通过定义可重用的变量来管理样式。它以 – 前缀声明变量，并通过 var() 函数使用变量值。例如，声明全局变量在 :root 中：

:root {
  --primary-color: #3498db;
  --text-size: 16px;
}
body {
  color: var(--primary-color);
  font-size: var(--text-size);
}

CSS 变量解决了多个问题：

• 减少重复代码和增强一致性：在大型项目中，避免硬编码相同的颜色、尺寸等值于多个位置，防止不一致。通过一次性定义如主色调变量，它自动统一应用到相关元素中。如果修改变量值，所有引用的地方即时更新，无需手动搜索和替换。
• 提高代码可维护性：通过集中管理关键样式值，它降低了复杂样式表的维护难度。主题切换或响应式设计调整时可以更轻松，开发者只需改动全局变量即可实现全局更新。
• 支持动态主题切换：CSS 变量可与 JavaScript 交互动态更新，实现运行时主题变化：

  document.documentElement.style.setProperty('--primary-color', '#e74c3c');
  

• 作用域管理：变量可以全局或局部定义：如全局在 :root 中声明的变量可用于整个文档，局部在一个元素下定义的变量仅限该作用域内使用，支持覆盖。
• 回退机制：var() 函数支持传入备用值，如当变量未定义时使用默认确保兼容：

  .font-size {
  font-size: var(--responsive-font, 14px);
  }
  

• 计算灵活性与类型支持：变量值支持字符串、数值、颜色等类型，可与 calc() 函数无缝结合实现动态计算，但需注意单位兼容性问题。