css variable的使用方法和好处有哪些？

CSS 变量（也称为 CSS 自定义属性）使用 -- 开头，例如 --main-color: #007bff;。它们可以在文档的根、任何元素或特定选择器中声明。 使用方法和好处如下：

使用方法：

1. 声明变量： 在选择器中使用 -- 前缀声明变量。例如：

   :root {
     --main-color: #007bff;
     --font-size: 16px;
   }
   
   .container {
     --container-width: 80%;
   }
   

2. 使用变量： 使用 var() 函数访问变量值。例如：

   body {
     color: var(--main-color);
     font-size: var(--font-size);
   }
   
   .container {
     width: var(--container-width);
   }
   

3. 回退值： var() 函数可以接受第二个参数作为回退值，如果变量未定义或无效，则使用回退值。例如：

   body {
     color: var(--main-color, black); /* 如果 --main-color 未定义，则使用 black */
   }
   

4. JavaScript 操作： 可以使用 JavaScript 获取和设置 CSS 变量的值，实现动态样式控制。例如：

   // 获取变量值
   const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
   
   // 设置变量值
   document.documentElement.style.setProperty('--main-color', 'red');
   

好处：

1. 可维护性： 将颜色、字体大小等常用值定义为变量，方便统一修改和维护。只需要在一个地方修改变量值，就可以影响所有使用该变量的地方。
2. 可重用性： 可以在不同的选择器、元素甚至不同的样式表中重复使用相同的变量。
3. 级联和继承： CSS 变量遵循级联和继承规则，可以根据需要在不同层级定义和覆盖变量。
4. 动态样式： 可以使用 JavaScript 动态修改 CSS 变量的值，实现更灵活的样式控制，例如主题切换、响应式设计等。
5. 代码简洁性： 使用变量可以减少重复代码，使样式表更简洁易读。
6. 提高性能： 相比于使用预处理器（如 Sass、Less），CSS 变量在浏览器原生支持，无需编译，可以提高性能。

示例：主题切换

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.dark-theme {
  --primary-color: #212529;
  --secondary-color: #adb5bd;
}

button {
  background-color: var(--primary-color);
  color: white;
}

.highlight {
  color: var(--secondary-color);
}

通过切换 dark-theme 类，可以轻松切换主题颜色。

总而言之，CSS 变量是强大的 CSS 工具，可以提高代码的可维护性、可重用性和灵活性，是现代前端开发中不可或缺的一部分。