我刚开始使用带有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));
我知道我还有很多东西要学，但我希望有人能帮助我朝着正确的方向前进！
感谢
嵌套计算是可能的(https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc((_with_CSS_Variables(，但您的计算是用px单位除以px单位，这是一个无效的运算，使用calc和除法时的第二个参数必须是数字。使用乘法运算符时也是如此，例如，你不能使用10px*10px，但可以使用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，则左边距将被正确设置。