docs/css-variables/usage

🎨 CSS 变量使用指南 🎨

CSS 变量（Custom Properties）是现代前端开发的重要特性，可提升样式复用与动态控制能力。以下是核心用法：

1. 定义变量
   在 :root 或特定作用域中声明：

   :root {
     --primary-color: #3498db;
     --font-size: 16px;
   }
   

   💡 提示：变量名建议使用 -- 前缀，便于区分普通属性

2. 使用变量
   通过 var() 函数调用：

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

   ✅ 支持嵌套使用：var(--parent, var(--child))

3. 动态更新
   通过 JavaScript 实时修改：

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

4. 应用场景

   • 主题切换：通过变量控制颜色/字体等主题属性
   • 响应式设计：定义不同屏幕尺寸下的变量值
   • 组件样式统一：共享变量实现样式一致性

🔗 深入了解：CSS 变量概述

📌 最佳实践

• 避免在 !important 中使用变量
• 使用 @media 查询配合变量实现响应式
• 通过 CSS-in-JS 框架增强变量动态能力

📌 **注意**：变量作用域遵循 CSS 层叠规则，可优先使用 `:root` 定义全局变量

🔧 调试技巧

1. 使用浏览器开发者工具查看变量值
2. 通过 @layer 控制变量覆盖顺序
3. 利用 calc() 与变量结合实现复杂计算

如需探索更多进阶用法，请访问 /css-variables/best-practices