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

Posted 2023-03-06

【中文标题】使用带有 Calc() 的 CSS 变量在第二个参数时不起作用

【英文标题】：Using CSS Variables with Calc() not working when 2nd parameter

【发布时间】：2019-05-08 08:32:17

【问题描述】：

我是使用 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));

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

谢谢

【问题讨论】：

留下评论，以防有人因为与我相同的问题来到这里（标题仍然适用），我设置--my-var: 0稍后通过JS更改值。然后我尝试减去它：calc(-100px - var(--my-var))，但在这种情况下，它明确需要--my-var: 0px 的单位。

calc(#$a - #$b); 会工作吗？

【参考方案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: #$paddingToppx;  
--padding-bottom: #$paddingBottompx;
--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，左边距将正确设置。

【讨论】：

但是你的计算是以 px 单位除以 px 单位留下一个整数 --> 它不会留下整数它只是一个无效的操作（不是允许）

是的，我同意，我试图解释为什么可能不允许该操作的上下文。将根据您的反馈更新答案。

@Kessa 请将问题标记为已回答，如果它最终对您有所帮助:)