为什么我的作用域 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中文网其他相关文章！