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