1

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

我所做的:

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

4

3 回答 3

2

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

当前编译的 CSS:

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

解决方案:

直接计算大小变量。

$size: $height - 10px;

分叉的 Codepen

于 2015-09-24T08:14:26.710 回答
0

在您的情况下,鉴于您在评论中提供的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 中正常工作。

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

于 2017-11-27T16:03:58.833 回答
0

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

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

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

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

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

于 2016-05-04T14:05:01.473 回答