CSS 设置变量

CSS 变量可以让程序员在 CSS 中使用变量。变量可以包含数字、字符串或颜色值等内容。CSS 变量以 -- 开头，后跟着变量的名称和值。

定义变量

定义 CSS 变量可以通过在声明中使用 -- 标记，如下所示：

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

在上面的例子中，:root 选择器用于定义文档的根元素，并在其中定义了两个 CSS 变量。其中 --primary-color 和 --secondary-color 为变量名称，#007bff 和 #6c757d 为变量值。

使用变量

CSS 变量可以通过 var() 函数在样式表中使用。示例如下：

.container {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

在上面的例子中，background-color 属性使用 var(--primary-color) 作为变量值，color 属性使用 var(--secondary-color) 作为变量值。这样就可以在以后的样式中更改变量值，从而改变整个文档的外观。

变量继承

CSS 变量也支持继承。示例如下：

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

.container {
  --primary-color: #dc3545;
}

在上面的例子中，--primary-color 的值在 .container 中被重新定义为 #dc3545。当访问 .container 中的元素时，它们将使用 #dc3545 作为变量值。所有其他元素将继续使用 #007bff 作为变量值。

总结

CSS 变量是一种非常有用的功能，它允许程序员使用变量来指定颜色、字体、间距等样式细节，从而提高代码的可用性和可维护性。您应该始终遵循最佳实践，例如在文档的根元素中定义变量，并在需要使用变量值的地方使用 var() 函数。