🎨 告别预处理器：CSS 变量（Custom Properties）实战与主题切换

CSS 变量的革命性意义

CSS 自定义属性（Custom Properties，通常称为 CSS 变量）带来了前所未有的灵活性和动态性，它们是 **原生的、活的** CSS 属性。与 SASS/Less 等预处理器变量不同，CSS 变量可以在运行时被 JavaScript 读取和修改，并受 **CSS 级联规则** 的约束。

💡 变量的优势与应用：

• 主题切换： 这是 CSS 变量最强大的应用。通过在 `:root` 或特定容器上定义 `--primary-color` 等变量，只需通过 JavaScript 更改根元素上的一个类名，即可瞬间实现 **深色模式或多主题切换**。
• 响应式设计： 变量可以定义在媒体查询内部，实现 响应式的变量值，如 `--grid-gap`。
• 代码可维护性： 集中管理颜色、字体、间距等设计 Token，提高代码的可读性和统一性。

您可以通过 `document.documentElement.style.setProperty('--primary-color', 'red')` 轻松实现动态调整。虽然 CSS 预处理器在嵌套和混合方面仍有优势，但在设计系统和动态主题方面，CSS 变量无疑是 更强大、更原生 的选择。掌握 CSS 变量，是前端工程师迈向现代 CSS 架构的关键一步，它使得样式逻辑变得更加直观和强大。