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

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

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

Answer 1

正如上面所评论的，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 变量

Unable to overwrite CSS variable with its own value

css

css-variables

css-calc