Question

假设具有以下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中测试了box 3的方法，发现var(--box-size)没有显示值，但是var(--box-larger)确实返回了正确的值（16px）。

有人可以解释为什么方框3的方法不起作用。我的意思是，它看起来像有效的CSS。

Answer 1

如上所述，CSS并不是一种编程语言，您具有循环依赖关系，想要用一个不起作用的相同属性来表示一个属性。

参考specification：

自定义属性几乎没有被评估，除了它们允许并评估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>

无法用自己的值覆盖CSS变量

1 个答案: