将 calc 函数中的值作为变量存储在 scss 中答案

【问题标题】：storing values from calc function as a variable in scss将 calc 函数中的值作为变量存储在 scss 中
【发布时间】：2014-10-22 19:20:43
【问题描述】：

各位程序员您好，

我刚刚开始使用 SCSS；这太棒了！我有一个关于变量的问题。我想计算 div 的宽度加上导航元素内的填充、边距和边框。然后我想将计算出的宽度传递给这样的变量：

$numbDivs:       4;
$divWidth:       150px;
$divPadd:        10px;
$divBorderWidth: 1px;
$divMarg:        2px;

$navBreakPoint:  calc( #{$numbDivs} * ( #{$divWidth} + ( ( #{$divPadd} + #{$divBorderWidth} + #{$divMarg} ) * 2 ) ) );

我已经在没有#{} 部分的情况下尝试过，但没有成功。

可能只是 scss 不支持这个......但它会很好。

感谢大家的所有帖子。

【问题讨论】：

标签： sass

【解决方案1】：

calc() 是 CSS 的函数，而不是 Sass。如果要将结果存储为变量，请删除字符串插值并计算它：

$navBreakPoint:  $numbDivs * ($divWidth + (($divPadd + $divBorderWidth + $divMarg) * 2));

值得注意的是，calc() 不能与媒体查询结合使用（参见：calc() not working within media queries）

【讨论】：

谢谢，成功了。我想我对 calc() 的目的感到困惑。我能够将其放入变量中，然后将该变量与 Bourbon 的媒体功能一起使用，并且效果很好。