使用带有 Calc() 的 CSS 变量在第二个参数时不起作用

Question

我是在 calc() 中使用 CSS 变量的新手，所以如果这很明显，请原谅我，但我正在尝试执行以下计算，并且终生无法弄清楚为什么它不起作用：

$h2-font-size: 21px;

--padding-top: calc(#{$h2-font-size}/3);
--padding-bottom: calc(#{$h2-font-size}/var(--padding-top));

padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);

第一部分计算 OK（即--padding-top: calc(#{$h2-font-size}/3);）正确计算7并填充该 OKpadding-top:值。

但是，该padding-bottom:值计算为0。

知道我哪里出错了吗？

最初我想知道是否是因为我使用了一个sass变量，但如果这是我预期--padding-top:失败的问题......但事实并非如此。

我注意到，如果我不向 font-size 添加 px 值，并将 font-size 放在 CSS 变量之后，那么我确实会得到一个返回值（尽管是我需要的错误数字）：

--padding-bottom: calc(var(--padding-top)/21); = 0.3333333

但是，如果我尝试交换顺序以进行正确的计算，我会得到0： --padding-bottom: calc(21/var(--padding-top));

我知道我还有很多东西要学，但我希望有人可以帮助我朝着正确的方向前进！

谢谢

Answer 1

嵌套计算是可能的（https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables），但您的计算采用 px 单位并将其除以 px 单位，这是无效运算，计算和除法时第二个参数必须是数值。使用乘法运算符时也是如此，例如您不能使用 10px * 10px，但可以使用 10 * 10px 或 10px * 10 。所以我想说，看看你的用例，你可能最好使用两个 ScSS / Sass 变量。

请参阅此笔上的示例： https://codepen.io/ypoulakas/pen/rQXyZr

$h2fontsize: 21;

$paddingTop: $h2fontsize / 3;

$paddingBottom: $h2fontsize / $paddingTop;

body {
--padding-top: #{$paddingTop}px;  
--padding-bottom: #{$paddingBottom}px;
--margin-top: calc( var( --padding-top ) * 4 );
--margin-left: calc( ( var( --margin-top ) ) / 2 ) ;
  background-color: pink;
}

.test {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background-color:red;
  margin-top: var(--margin-top);
  margin-left: var(--margin-left);
}

这两个 Sass 变量用于根据 h2 字体大小变量控制顶部和底部的填充。查看您的公式，尽管底部填充始终为 3 。

作为示例的扩展部分，我根据 css 变量而不是 Sass 变量设置顶部和边距。如果您看到左边距设置为 calc (200px / 10px)，则表明边距未设置，但如果删除 10 上的 px，则左边距将被正确设置。