假设有以下 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 不是 C++,并且你有一个循环依赖,想要表达一个具有相同属性的属性,这是行不通的。
引用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.
解决这种情况的一个常见方法是添加更多变量以避免任何循环依赖。
: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 - 无法用自己的值覆盖 CSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51660196/