為什麼我的作用域 CSS 自訂屬性會在外部作用域計算中使用時會被忽略？

用於計算外部作用域中的變數時忽略CSS 作用域自訂屬性

當嘗試建立可組合、鬆散耦合的CSS 時，重要的是了解自訂屬性的範圍。在某些情況下，對子元素中的作用域自訂屬性進行的變更可能不會如預期般影響父元素。

當使用自訂屬性計算外部作用域中的變數時，就會出現這樣的情況。當子元素中再次定義自訂屬性時，就會出現問題，導致父元素的初始評估被忽略。

為了說明這一點，請考慮以下範例：

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

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

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

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

ol {
  font: 1em sans-serif;
}

.size-1 {
  font-size: var(--size-1);
}

.size-2 {
  font-size: var(--size-2);
}

.size-3 {
  font-size: var(--size-3);
}

在此範例中，--size-* 屬性是使用 --scale 自訂屬性在根層級計算的。但是，在 .scale-* 類別中，再次定義了 --scale 屬性。這會導致從根元素繼承的 --scale 值被忽略，從而導致使用 --scale: 1 的預設值計算 --size-* 屬性。

要避免此問題，在適當的層級定義自訂屬性並避免在子元素中重新定義它們至關重要。這確保了作用域自訂屬性可以有效地用於計算外部作用域中的變數並實現可組合、鬆散耦合的 CSS。

以上是為什麼我的作用域 CSS 自訂屬性會在外部作用域計算中使用時會被忽略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！