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

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

我所做的：

$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*/;

不能将函数嵌套在另一个calc（）中

当前编译的CSS:

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

解决方案：

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

直接计算大小变量

$size: $height - 10px;

---

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

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

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

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

注意，永远不要忘记每个操作员前后的空格

在您的情况下，考虑到您在注释中提供的信息，您不需要使用

calc（）

。根据经验，当您想要混合单位时，使用

calc（）

，例如从

%

中减去

px

值

似乎您正在（1）使用其他

px

，或（2）使用无单位数操作

px

值，因此无需使用

calc（）

：

这是密码笔：

---

然而，为了回答您的实际问题：您现在可以将

calc（）

嵌套在其他

calc（）

中

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

---

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

什么不起作用？您是否为calc中的变量定义了值？AFAIK这在SassMister中运行良好。编译器不设置边距和填充（“乘法操作数无效”）。。。我知道这在萨斯米特很管用。但是intelliJ说不…：-）您现在可以在另一个

calc（）

中嵌套

calc（）

。规范已经更改，浏览器也在跟进。你的例子可以在Chrome上运行。谢谢你的评论，伊利亚。干得好，W3C团队！：）@古里布波科夫他们是不相容的。因此，根据一致的单位调整其他值。这不是通用解决方案，但适用于他的用例。@ManojKumar，“这不是通用解决方案”-为什么？我想在一般情况下，我们需要减少所有参数，使之成为一个单位。@GurebuBokofu我是说答案不是一个通用的解决方案，但注释是。每个运算符后面不需要空格，只需要一些。