关于css变量

1. CSS变量简介

• 定义：CSS变量（也叫自定义属性）是以--开头的变量，可以在CSS样式表中定义，并在需要的地方引用。
• 作用范围：CSS变量可以根据作用域（如:root 或某个元素）不同而影响全局或局部样式。
• 运行时生效：CSS变量的值在浏览器渲染时解析，因此可以在页面加载后动态改变其值，实现动态样式变化。

---

2. CSS变量的语法和用法

定义变量：

:root {
    --primary-color: #3498db;
    --padding-size: 10px;
}

• :root 是全局作用域，代表整个HTML文档的根节点。
• --primary-color 和 --padding-size 是CSS变量。

引用变量：

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

• 使用 var() 函数引用变量。

---

3. CSS变量的特点

1. 运行时可修改：
   CSS变量的值可以在页面运行时通过JavaScript动态更改。

   示例：

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

   这会把 --primary-color 的值改成绿色，并立即生效。

2. 层级作用域：
   CSS变量可以在不同的作用域中定义，后代元素会继承或覆盖变量。

   示例：

   :root {
       --primary-color: #3498db;
   }
   
   .dark-theme {
       --primary-color: #2c3e50;
   }
   

   当 .dark-theme 类生效时，它会覆盖全局定义的 --primary-color。

3. 支持媒体查询：
   CSS变量可以根据媒体查询的条件变化。

   示例：

   :root {
       --primary-color: #3498db;
   }
   
   @media (prefers-color-scheme: dark) {
       :root {
           --primary-color: #2c3e50;
       }
   }
   

---

4. 与Less、Sass的区别

• Less/Sass变量在编译阶段起作用，一旦编译为CSS文件，变量就会消失，不能动态改变。

  @primary-color: #3498db; // Less 变量
  .button {
      background-color: @primary-color;
  }
  

  编译后：

  .button {
      background-color: #3498db;
  }
  

• CSS变量在运行时生效，且可以通过JavaScript或不同作用域动态更改，适合做主题切换或动态样式。

---

5. 何时使用CSS变量与Less变量？

• CSS变量：适用于需要动态更新样式、主题切换、媒体查询适配等情况。
• Less/Sass变量：适用于样式比较固定且希望在编译阶段完成所有逻辑的项目。