CSS 自定义属性（层叠变量）

CSS 级联变量的自定义属性模块增加了对 CSS 属性中级联变量的支持，并允许您创建自定义属性来定义这些变量，以及将自定义属性用作其他 CSS 属性值的功能。

在使用 CSS 时，您经常会重复使用常见的项目特定值，例如与您的布局配合良好的宽度，或者您的配色方案的一组颜色。管理样式表中重复的一种方法是定义一次值并在其他许多地方使用它。自定义属性允许您创建和定义可重用的自定义变量，从而简化复杂或重复的规则，使它们更易于阅读和维护。例如，--dark-grey-text 和 --dark-background 比十六进制颜色（例如 #323831）更容易理解，并且它们的使用上下文也更明显。

自定义属性的实际应用

要了解如何使用自定义属性，请将输入滑块从左向右移动。

<div class="container">
  <div id="color-1">--hue</div>
  <div id="color-2">--hue + 10</div>
  <div id="color-3">--hue + 20</div>
  <div id="color-4">--hue + 30</div>
  <div id="color-5">--hue + 40</div>
  <div id="color-6">--hue + 50</div>
  <div id="color-7">--hue + 60</div>
  <div id="color-8">--hue + 70</div>
</div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

.container {
  display: grid;
  font-family: sans-serif;
  color: white;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.container div {
  border-radius: 0.5rem;
  padding: 1rem;
}

input {
  width: 100%;
  margin: 0;
}

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 50% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 50% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 50% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 50% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 50% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 50% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 50% 50%);
}
#color-8 {
  background-color: hsl(calc(var(--hue) + 70) 50% 50%);
}

在这些色样中，background-color 使用 hsl() <color> 函数设置为 hsl(var(--hue) 50% 50%)。每个色样将 <hue> 值增加 10 度，例如 calc(var(--hue) + 10)、calc(var(--hue) + 20) 等。当滑块的值从 0 更改到 360 时，--hue 自定义属性的值会使用 calc() 进行更新，网格中每个框的背景颜色也会更新。