使用带有 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 并将 OK 填充到 padding-top: 值中。

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

知道我哪里出错了吗？

最初我想知道是不是因为我使用了sass 变量，但如果这是我预计--padding-top: 会失败的问题......但它没有。

我注意到，如果我不将 px 值添加到字体大小，并将字体大小放在 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 单位，这是无效的操作，使用 calc 和除法时的第二个参数必须是数字。使用乘法运算符时也是如此，例如，您不能使用 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，左边距将正确设置。