為什麼作用域 CSS 自訂屬性有時無法正確級聯計算？

CSS 中的作用域自訂屬性繼承

在CSS 中定義自訂屬性時，作用域在其繼承和使用中起著至關重要的作用。但是，您可能會遇到這樣的情況：當用於計算外部作用域中的變數時，作用域自訂屬性會被忽略。當在子元素中重新定義自訂屬性時，可能會發生這種情況，從而導致意外結果。

作用域說明

自訂屬性是使用 -- 前綴和可以使用 :root 或 :host 關鍵字將範圍限定為特定元素或子樹。作用域屬性只能在元素或其後代中訪問，從而允許封裝和受控繼承。

作用域屬性和計算問題

在您的範例中，您定義了:root 選擇器中的作用域自訂屬性--scale 用於計算--size-1、--size-2 和--size-3 的值。但是，在子元素（.scale-1x、.scale-2x 和 .scale-3x）內，您重新定義了 --scale。這會產生一個問題，因為 CSS 以自上而下的方式評估自訂屬性。一旦自訂屬性在某個層級上進行評估，就無法在嵌套元素中覆寫或變更它。

用於可組合縮放的CSS 自訂屬性技術

實現所需的效果在不耦合的情況下在不同層級縮放清單的效果，可以使用以下技術：

:root {
  --size-1: calc(1rem * var(--scale, 1));
  --size-2: calc(2rem * var(--scale, 1));
  --size-3: calc(3rem * var(--scale, 1));
}

.size-1, .size-2, .size-3 {
  font-size: var(--scale, 1rem);
}

.scale-1x {
  --scale: 1;
}
.scale-2x {
  --scale: 2;
}
.scale-3x {
  --scale: 3;
}

在這種方法中， --scale 屬性的範圍仍然是:root 等級。但是，我們不是直接使用它來計算字體大小，而是在 .size-1、.size-2 和 .size-3 類別內的 var() 函數中使用它。如果在外部範圍中設置，這允許字體大小繼承 --scale 的值。如果未提供 --scale，則會回退到預設值 1rem。

使用此技術，您可以在不耦合元素的情況下組合縮放效果。您可以將 .scale-1x、.scale-2x 和 .scale-3x 類別套用至不同的清單元素或群組，以實現所需的比例變更。

以上是為什麼作用域 CSS 自訂屬性有時無法正確級聯計算？的詳細內容。更多資訊請關注PHP中文網其他相關文章！