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

Question

如何 link 一个变量在另一个变量中具有计算值？

我的工作：

$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() 中。不幸的是有一点 Hack：

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

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

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

P.S。永远不要忘记每个运算符前后的空格！

Answer 3

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

中减去 px 值

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

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

这是代码笔：https://codepen.io/imoskvin/pen/gXdMgR

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

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

有关详细信息，请参阅其中一位规范编辑的 this answer。

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

How to nest calc-variables within other calc-variables in Sass?

css

sass

css-calc