无法用自己的值覆盖CSS变量 [英] Unable to overwrite CSS variable with its own value
问题描述
假设具有以下CSS:
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--box-size: calc(var(--box-size) + var(--box--larger));
}
.box--larger2 {
--box-size: calc(50px + var(--box--larger));
}
:root {
--box-size: 50px;
--box--larger: 16px;
}
<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>
我想知道为什么方框1和2有效,而方框3无效.我希望方框3与方框2看起来相同,但事实并非如此.我在Chrome中测试了方框3的方法,发现var(--box-size)
没有显示值,但是var(--box-larger)
确实返回了正确的值(16px).
有人可以解释为什么方框3的方法行不通.我的意思是,它看起来像有效的CSS.
如上所述,CSS并不是一种编程语言,并且您具有循环依赖关系,希望用无法使用的相同属性来表达该属性.>
请参阅规范:
自定义属性几乎没有被评估,除了 他们允许并评估var()函数的值.这个可以 创建循环依赖,其中自定义属性使用var() 引用自身,或每次尝试使用两个或多个自定义属性 互相参考.
这种情况的常见解决方法是添加更多变量,以避免任何循环依赖性.
:root {
--bs:50px;
--bl:16px;
--box-size:var(--bs);
--box--larger:var(--bl);
}
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--box-size: calc(var(--bs) + var(--bl));
}
.box--larger2 {
--box-size: calc(50px + var(--bl));
}
<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>
Lets assume to have the following CSS:
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--box-size: calc(var(--box-size) + var(--box--larger));
}
.box--larger2 {
--box-size: calc(50px + var(--box--larger));
}
:root {
--box-size: 50px;
--box--larger: 16px;
}
<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>
I wonder why boxes 1 and 2 work but box 3 doesn't. I would expect box 3 to look the same as box 2 but it doesn't. I tested box 3's approach in Chrome and I found that var(--box-size)
doesn't show a value but var(--box-larger)
does return the right value (16px).
Could someone explain why the approach of box 3 doesn't work. I mean to me it looks like valid CSS.
As commented above, CSS is not a programming language and you are having a cyclic dependency wanting to express a property with the same property which will not work.
Refering to the specification:
Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value. This can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other.
A common fix to that situation is to add more variables to avoid any cyclic dependency.
:root {
--bs:50px;
--bl:16px;
--box-size:var(--bs);
--box--larger:var(--bl);
}
.box {
width: var(--box-size);
height: var(--box-size);
border: 1px solid red;
}
.box--larger {
--box-size: 66px;
}
.box--larger1 {
--box-size: calc(var(--bs) + var(--bl));
}
.box--larger2 {
--box-size: calc(50px + var(--bl));
}
<div class="box">1</div>
<div class="box box--larger">2</div>
<div class="box box--larger1">3</div>
<div class="box box--larger2">4</div>
这篇关于无法用自己的值覆盖CSS变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!