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

【问题标题】：Unable to overwrite CSS variable with its own value无法用自己的值覆盖 CSS 变量
【发布时间】：2019-01-10 14:43:27
【问题描述】：

假设有以下 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。

【问题讨论】：

如何在 html 中导入 css 文件？
@AlesandroGiordano 我看不出这有什么关系，但只是用正常的方法：<link rel="stylesheet" href="stylesheet.css">。这两个变量与上面的示例位于同一个文件中。
如果您的示例正在使用 servlet，则有时 css 会保存在项目的缓存中...您能告诉我您在哪个上下文中使用此 html 文件吗？
我知道 HTML 和 CSS 可以被缓存，但我总是在页面重新加载时使用清除缓存插件刷新缓存。 HTML 现在位于 Laravel 刀片中，而我正在制作的框架的 CSS 部分。但是，如果它是由于缓存而不是我猜它应该在 SO sn-p 中工作，但它没有。
CSS 不是函数式语言。它不会像您期望的常规编程语言那样计算这些值。基本上你是想告诉系统，“这个项目的值等于它的值加 16”，这是令人困惑的。

标签： css css-variables css-calc

【解决方案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>

【讨论】：