css - 如何将计算变量嵌套在 Sass 中的其他计算变量中？

Question

如何将变量与另一个变量中的计算值链接？

我所做的：

$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 演示

Answer 1

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

当前编译的 CSS：

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

解决方案：

直接计算大小变量。

$size: $height - 10px;

分叉的 Codepen

Answer 2

在您的情况下，鉴于您在评论中提供的Codepen，您不需要使用calc(). 根据经验，calc()当您想要混合单位时使用，例如从pxa 中减去一个值%。

似乎您正在px使用 (1) 与 otherpx或 (2) 使用无单位数字来操作值，因此无需使用calc()：

$height:                25px;
$size:                  $height - 10px;
$margin:                $size / 4;
$padding:               $size * 2;

这是 Codepen：https ://codepen.io/imoskvin/pen/gXdMgR

---

但是，要回答您的实际问题：您现在可以嵌套calc()在 other 里面calc()！

看来这是最初的意图，并且规范已相应更新。浏览器正在迎头赶上：您原来的Codepen现在可以在 Chrome 和 Firefox 中正常工作。

有关更多详细信息，请参阅其中一位规范编辑器的答案。

Answer 3

实际上，可以将一个 calc() 发送到另一个 calc() 中。不幸的是，有一个小技巧：

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

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

这会成功的。它只是将所有（包括括号）放入您的计算中，但仍然能够解析变量。享受。:)

PS 永远不要忘记每个运算符前后的空格！