CSS 变量 – 产生动态和可定制设计效果的能力在 Web 开发领域至关重要。自定义属性或 CSS 变量提供了一种实现此领域的方法，允许开发人员在样式表中指定可重用的值并在运行时动态修改它们。这篇博文将通过一个突出其动态功能的实际示例来探讨 CSS 变量。

理解 CSS 变量
样式表的可重用值可以通过使用 CSS 变量来定义和使用。它们使用 — 前缀后跟名称来声明，通常在 :root 伪类中以实现全局可用性。它们可用于存储字体、颜色、宽度、高度等值。这些变量在 CSS 代码中定义后甚至可以在其他文件中使用。（了解更多）

CSS 变量是这样定义的：

:root {
  --main-color: #3498db;
}

在此示例中，我们定义了一个名为 –main-color 的变量，其值为#3498db。我们已经在 :root 伪类中声明了它，这确保了该变量在 CSS 代码中的任何位置都可以访问。

如何使用 CSS 变量
定义后，您可以在 CSS 代码中的任何位置使用 var() 函数来访问 CSS 变量。

Var():

CSS 变量 var() 允许您输入自定义属性的值来替换另一个属性的部分值..

句法 ：

var(--custom-property);

例子 ：

.element {
  color: var(--main-color);
}

在此示例中，我们使用 –main-color 变量来设置元素的文本颜色。如果您决定稍后更改主颜色，您所能做的就是更新变量的值，它将自动反映在使用它的所有元素上。

1.创建动态主题颜色
输出

考虑这样一种情况，您想要设计一个主题颜色动态变化的网页。您希望能够为用户提供单击按钮的选项，然后看到页面的整个配色方案发生变化。让我们看看 CSS 变量如何实现这一点。（阅读有关 CSS 变量的更多信息）

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

此示例显示了一个带有按钮和标题的网页。按钮和标题的背景颜色是使用 –primary-color CSS 变量自定义的，该变量的默认值为#3498db。单击按钮后，JavaScript 脚本会创建一个随机的十六进制颜色代码，然后将其指定为 –primary-color 变量的新值。按钮和标题的主题颜色动态变化，为用户带来有趣的交互体验。

结论
在 Web 开发中，CSS 变量提供了一种通用且有效的样式管理方法。通过定义可重用值并动态应用它们，开发人员可以创建更易于维护和可定制的网站。 CSS 变量提供了广泛的工具集来提高在线项目的样式功能，无论重点是主题、响应能力还是动画。要在您的设计中充分利用它们，请开始将它们集成到您的 CSS 工作流程中！（阅读有关 CSS 变量的更多信息）