用于计算父作用域中的变量时,CSS作用域自定义属性无法识别
扫码关注官方订阅号
我正在尝试通过var
自定义属性来缩放大小,以便类可以在不耦合的情况下组合。期望的效果是3个列表将具有3个不同的比例,但正如CodePen上所示,所有3个列表的比例相同。我正在寻找范围界定和CSS自定义属性技术的解释,该技术可以通过可组合的松散耦合代码来实现此目的。
在您的情况下,您已在根级别评估了--scale
自定义属性来定义--size-*
属性,然后定义了--scale
再次在子元素内。这不会再次触发评估,因为它已经在上层中完成。
下面是一个简单的例子来说明这个问题:
.scale{--size-1:calc(1*var(--scale,1)*1rem);--size-2:calc(2*var(--scale,1)*1rem);--size-3:calc(3*var(--scale,1)*1rem);}.size-1{font-size:var(--size-1)}.size-2{font-size:var(--size-2)}.size-3{font-size:var(--size-3)}.scale-1x{--scale:1}.scale-2x{--scale:2}.scale-3x{--scale:3}html{font:1emsans-serif;background:papayawhip;}ol{float:left;list-style:none;margin:1rem;}
在本例中,--scale
的定义级别与其评估相同,因此将为每种情况正确定义--size-*
。
在第一种情况下,您会陷入3,因为在根级别没有为--scale
指定值。在最后一种情况下,我们陷入了2,因为我们在同一级别定义了--scale
并且我们有它的值。
在所有情况下,我们都应该避免在:root
级别进行任何评估,因为它根本没有用。根级别是DOM中的最上层,因此所有元素都将继承相同的值,除非我们再次评估变量,否则DOM内不可能有不同的值。
您的代码相当于此代码:
:root{--size-1:calc(1*1*1rem);--size-2:calc(2*1*1rem);--size-3:calc(3*1*1rem);}
我们再举一个例子:
直观上,我们可能认为可以通过更改:root
级别定义的3个变量之一来更改--color
,但我们不能执行此操作以及上述操作代码与此相同:
3个变量(--r
、--g
、--b
)在:root
内求值code>因此我们已经用它们的值替换了它们。
在这种情况下,我们有3种可能性:
考虑到这一点,我们应该始终将评估保持在DOM树中尽可能最低的点,尤其是在变量更改之后(或在同一级别)
这是我们不应该做的事情
这是我们应该做的
我们还可以这样做:
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright2014-2023AllRightsReServed|苏州跃动光标网络科技有限公司|