如何在Sass中的其他calc变量中嵌套calc变量？

Question

如何将变量与另一个变量中的calc值相关联？

我的所作所为：

$height:                25px;
$size:                  calc(#{$height} - 10px);
$margin:                calc(#{$radiosize} /4);
$padding:               calc(#{$radiosize} *2);

会发生什么：

$height:                25px;
$size:                  15px;
$margin:                /*does not work*/;
$padding:               /*does not work*/;

CodePen Demo

Answer 1

您不能将calc()函数嵌套在另一个calc（）中。

当前编译的CSS：

margin: calc(calc(25px - 10px) /4); /* Incorrect syntax */
padding: calc(calc(25px - 10px) *2); /* Incorrect syntax */

<强>解决方案：

直接计算尺寸变量。

$size: $height - 10px;

Forked Codepen

Answer 2

实际上，可以将calc（）运送到另一个calc（）中。不幸的是有一点哈克：

$var1: 3px;
$var2: 5px;

$innerCalc: '(#{$var1} + #{$var2})';
$actualCalc: calc(#{$innerCalc} / 2); //4px

这样就可以了。 它只是将所有（包括Brackets）放入您的计算中，但仍然能够解析变量。请享用。 ：）

P.S。千万不要忘记每个操作员之前和之后的空白！