css变量属性有什么用途？有什么优缺点？

CSS 变量（也称为 CSS 自定义属性）是 CSS 中一个强大的功能，允许开发者定义可重用的值，并在样式表中重复使用。它们以 -- 开头，例如 --main-color: blue;。

用途：

1. 主题切换: 轻松实现网站的主题切换功能。通过修改少量 CSS 变量的值，就可以改变整个网站的配色方案、字体样式等。

2. 维护一致性: 确保设计元素的一致性。例如，可以将主要颜色、字体大小等定义为 CSS 变量，并在整个样式表中使用，避免重复定义和不一致的样式。

3. 简化样式表: 减少代码冗余，提高代码可读性和可维护性。通过使用 CSS 变量，可以避免重复编写相同的样式值。

4. 动态样式: 通过 JavaScript 动态修改 CSS 变量的值，实现动态的样式变化，例如根据用户交互或其他事件改变元素的颜色、大小等。

5. 响应式设计: 根据不同的屏幕尺寸或设备类型定义不同的 CSS 变量值，实现响应式布局。

6. 继承和层叠: CSS 变量遵循 CSS 的继承和层叠规则，可以方便地管理样式的优先级和作用范围。

优点：

• 动态性： 可以在运行时通过 JavaScript 修改，实现动态样式变化。
• 可继承性： 子元素可以继承父元素的 CSS 变量值。
• 作用域控制： 可以在全局或局部作用域定义 CSS 变量。
• 可维护性： 修改一个 CSS 变量的值可以影响多个使用该变量的样式规则。
• 性能： 浏览器原生支持，性能较高。

缺点：

• 浏览器兼容性： 虽然现代浏览器都支持 CSS 变量，但一些旧版浏览器可能不支持。需要考虑兼容性问题，或者使用 polyfill。
• 学习成本： 对于不熟悉 CSS 变量的开发者来说，需要一定的学习成本。
• 调试： 调试 CSS 变量可能比调试普通的 CSS 属性稍微复杂一些。

示例：

:root {
  --main-color: #007bff;
  --font-size: 16px;
}

body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

.button {
  background-color: var(--main-color);
  color: white;
  font-size: calc(var(--font-size) * 1.2);
}

在这个例子中，--main-color 和 --font-size 被定义为全局 CSS 变量。 body 和 .button 元素使用 var() 函数来引用这些变量。 如果要改变主题颜色，只需要修改 --main-color 的值即可。

总而言之，CSS 变量是一个非常有用的 CSS 功能，可以提高代码的可维护性、灵活性，并且能够实现动态样式和主题切换等功能。 虽然有一些缺点，但其优点足以使其成为现代 Web 开发中一个重要的工具。