Question

我是刚开始将calc（）与CSS变量一起使用，因此请原谅我，但我试图执行以下计算，但终生无法弄清为什么它不起作用：< / p>

$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，并在padding-top:值中填充OK。

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

知道我要去哪里哪里吗？

最初，我想知道是否是因为我使用的是sass变量，但是如果那是我希望--padding-top:失败的问题……。但是不是。

我注意到，如果我不将px值添加到font-size，而是将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单位，这是无效操作，使用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，则左边距将被正确设置。

第2个参数

1 个答案: