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

【问题标题】：How to nest calc-variables within other calc-variables in Sass?如何将计算变量嵌套在 Sass 中的其他计算变量中？
【发布时间】：2015-12-21 17:35:55
【问题描述】：

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

我做什么：

$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

【问题讨论】：

什么不起作用？您是否为 calc 中的变量定义了值？ AFAIK 这在 SASSmeister 中运行良好。
编译器没有设置边距和填充（“乘法的无效操作数”）......这在 SASSmeister 中工作正常，我知道。但是 IntelliJ 说不... :-)

标签： css sass css-calc

【解决方案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

【讨论】：

您现在可以将calc() 嵌套在另一个calc() 中。规范已经改变，浏览器正在迎头赶上。您的示例适用于 Chrome。
感谢您的评论，伊利亚。干得好，W3C 团队！ :)
@GurebuBokofu 它们不兼容。所以根据一致的单位调整其他值。这不是通用解决方案，但适用于他的用例。
@ManojKumar，“这不是通用解决方案” - 为什么？我想在一般情况下，我们需要将所有参数减少为单个单元。
@GurebuBokofu 我是说答案不是通用解决方案，但评论是。

【解决方案2】：

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

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

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

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

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

【讨论】：

每个运算符后面都不需要空格，只有一些。

【解决方案3】：

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

您似乎正在操纵 px 值（1）与其他 px，或（2）与无单位数字，因此无需使用 calc()：

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

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

但是，要回答您的实际问题：您现在可以将calc() 嵌套在其他calc() 中！

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

有关更多详细信息，请参阅规范编辑之一的 this answer。

【讨论】：