使用纯的css如何定义变量？请举例说明

" 使用纯的 CSS 定义变量可以通过 CSS 变量（CSS Variables）来实现。CSS 变量允许我们在样式表中定义和使用自定义的变量，这些变量可以在整个样式表中重复使用，以便于在不同的地方进行调整和修改。

定义 CSS 变量可以使用 -- 前缀，后面是变量名和变量值。变量名可以是任何有效的 CSS 标识符，变量值可以是任何 CSS 属性值。下面是一个简单的示例：

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

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

.link {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer {
  background-color: var(--secondary-color);
  color: white;
  padding: 20px;
}

在上面的示例中，:root 伪类选择器用于在整个文档中定义全局的 CSS 变量。--primary-color 和 --secondary-color 分别表示主要颜色和次要颜色。在 .button 类选择器中，我们使用 var() 函数来引用 --primary-color 变量，并将其应用于背景颜色。同样地，在 .link 类选择器中，我们将 --primary-color 变量应用于文字颜色。

通过使用 CSS 变量，我们可以轻松地修改整个样式表中的变量值，以实现全局的样式调整。例如，如果我们想要更改主要颜色，只需在 :root 伪类选择器中将 --primary-color 变量的值修改为新的颜色值即可。

需要注意的是，CSS 变量具有层叠性，这意味着如果在某个元素中重新定义了一个变量，它将覆盖全局定义的同名变量。

总结一下，使用纯的 CSS 定义变量可以通过 CSS 变量来实现。通过定义和引用 CSS 变量，我们可以在整个样式表中重复使用自定义的变量，从而方便地进行样式调整和修改。这种方式可以提高代码的可维护性和可复用性，同时也提升了开发效率。"