SASS Calc 插值答案

【问题标题】：SASS Calc InterpolationSASS Calc 插值
【发布时间】：2017-07-04 01:16:07
【问题描述】：

我有一个 SASS 变量：

$default-padding: 15px

我想使用它来使用 calc 函数设置 CSS 宽度属性。

我需要根据 $default-padding 变量的值进行各种计算。例如，宽度为 100% - (2 * $default-padding)。因为左右两边都有内边距。

我正在尝试设置一个局部变量（使用 Bourbon 的条带单元方法）：

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px;

我希望这个变量的结果在这个用例中是 30px，我想在以下规则中使用它：

.popup {
    width: calc(100% - #{$default-padding-left-and-right});
}

这不起作用，生成的 CSS 是：

.popup {
    width: calc(100% - strip-unit(15px)px);
}

任何想法我做错了什么？

【问题讨论】：

$default-padding 是否始终是 px 值？

标签： css sass bourbon

【解决方案1】：

两件事：

似乎找不到条带单元功能（为什么该功能姓名打印出来）
您不应该对 $default-padding-left-and-right 进行插值（它会将变量值转换为字符串）——请改用乘法。

例子：

@function strip-unit($num) { @return $num / ($num * 0 + 1); }

$default-padding: 15px;
$default-padding-left-and-right: strip-unit($default-padding) * 2px;

.popup {
  width: calc(100% - #{$default-padding-left-and-right});
}

输出：

.popup {
  width: calc(100% - 30px);
}

【讨论】：

谢谢，不知道为什么找不到条带单元。如果我对结果进行乘法运算，它只会找不到。

【解决方案2】：

Bourbon 函数是 strip-units 而不是 strip-unit - 更改它应该可以解决您的问题

【讨论】：

我正在使用 Bourbon 4.3：警告：[Bourbon] [Deprecation] strip-units 已弃用，将在 5.0.0 中删除。请改用重命名的strip-unit 函数。