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

Question

我不熟悉将 CSS 变量与 calc() 结合使用，所以请原谅我，如果这很明显，但我正在尝试执行以下计算，但我终生无法弄清楚为什么它不起作用：

$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字体大小变量控制padding top和bottom。查看您的公式，尽管底部填充始终为 3 。

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

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

Using CSS Variables with Calc() not working when 2nd parameter

css

sass

css-calc