CSS变量

CSS变量是CSS3中引入的一种新特性。变量使得开发者可以定义一个可复用的值，然后在整个CSS样式表中使用这个变量。

定义变量

定义一个变量使用 -- 符号加上变量名称，例如：

:root {
  --main-color: #3d9;
}

这里定义了一个名为 --main-color 的变量，并将其值设置为 #3d9。

使用变量

使用一个已经定义的变量时，只需要使用 var() 函数并将变量名称放入括号中即可。例如：

h1 {
  color: var(--main-color);
}

这里将 h1 元素的颜色设置为 --main-color 变量的值。

动态改变变量

CSS变量的值是可以动态更改的。例如：

document.documentElement.style.setProperty('--main-color', '#f06');

这里改变了 --main-color 变量的值为 #f06。修改变量值的方式比直接改变CSS属性有很多好处，其中一个就是可以在通用样式表中使用变量并在运行时基于需要进行修改。

带有默认值的变量

如果变量在某个地方没有被定义，它会使用它的默认值。例如：

h1 {
  color: var(--main-color, red);
}

如果 --main-color 没有被定义，则 color 属性将使用默认值 red。

变量的作用域

变量的作用域规则与其他变量相同。如果变量在嵌套作用域中被定义，它将在那个作用域中有效。例如：

.container {
  --main-color: #3d9;
  .card {
    color: var(--main-color);
  }
}

这里只有 .card 内的元素将使用 --main-color 变量的值。

CSS变量可以提高CSS开发效率，使CSS更易于更改和维护。不过，需要注意的是CSS变量的兼容性有限，目前只有现代浏览器支持。如果需要考虑旧版浏览器的兼容性，可以使用预处理器或后处理器来实现类似的功能。