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() 進行更新，網格中每個框的背景顏色也會更新。