CSS 变量（CSS 自定义属性）

🎨 CSS 变量是现代 CSS 中用于存储可复用值的强大工具，能显著提升样式表的可维护性和灵活性。以下是关键知识点：

基础用法

1. 定义变量
   使用 :root 或特定选择器声明全局变量：

   :root {
     --primary-color: #3498db;
   }
   

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

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

3. 嵌套作用域
   子选择器可覆盖父级变量：

   .container {
     --font-size: 16px;
   }
   .container h1 {
     font-size: var(--font-size);
   }
   

应用场景

• 主题切换：通过修改变量实现颜色/字体动态调整
• 样式复用：避免重复书写相同值（如间距、圆角半径）
• 响应式设计：结合媒体查询调整变量值

注意事项

• 🔒 变量名必须以 -- 开头
• 🔄 变量作用域仅在当前 CSS 块内生效
• ⚠️ 不支持直接使用变量作为属性值（如 margin: var(--spacing); 无效）

扩展阅读

想深入了解 CSS 变量的进阶用法？点击这里查看 CSS 变量最佳实践指南