CSS变量「CSS variable」-猿码集

1. CSS变量介绍

CSS变量是CSS3中引入的一种机制，用于存储和重用CSS属性的值。通过使用变量，可以提高样式的可维护性和灵活性，减少样式代码的重复。可以在整个CSS样式表中使用这些变量，并且可以在JavaScript中动态地修改它们。

CSS变量的语法使用双减号（--）作为前缀，后跟变量的名称，例如：


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

在上面的例子中，我们定义了两个变量：primary-color和secondary-color。它们的值分别是#007bff和#6c757d。需要注意的是，变量的作用域是全局的，可以在整个样式表中使用。

使用CSS变量作为属性值非常简单，只需要使用var()函数引用变量即可。例如：


p {
  color: var(--primary-color);
}

在上面的例子中，我们将p元素的颜色设置为primary-color变量的值。这意味着当我们修改primary-color变量的值时，所有使用该变量的元素的颜色都会自动更新。

除了作为属性值，我们还可以在选择器中使用变量。例如：


a {
  color: var(--primary-color);
}
a:hover {
  color: var(--secondary-color);
}

在上面的例子中，我们将a元素的颜色设置为primary-color变量的值，并且在鼠标悬停时将颜色设置为secondary-color变量的值。这样可以很方便地统一管理链接的颜色。

通过JavaScript，我们可以动态地修改CSS变量的值。这样可以实现一些动态效果或根据用户的选择改变样式。


document.documentElement.style.setProperty('--primary-color', 'red');

在上面的例子中，我们将primary-color变量的值修改为红色。这样就会立即修改使用该变量的所有元素的颜色。

CSS变量的兼容性非常好，已经得到了所有现代浏览器的支持，包括Chrome，Firefox，Safari和Edge。甚至IE11也支持CSS变量，不过需要使用不同的语法，即使用变量声明中的var()替代。


:root {
  --primary-color: red;
}
p {
  color: var(--primary-color);
}

在上面的例子中，我们将primary-color变量的值设置为红色，并且将p元素的颜色设置为该变量。这样在IE11中也可以正常工作。

CSS变量是一种非常有用的机制，可以提高样式的可维护性和灵活性。通过使用变量，我们可以减少样式代码的重复，并且可以动态地修改样式。CSS变量在现代浏览器中得到了广泛的支持，并且即使在老版本的浏览器中也有一定的兼容性。