SASS 计算插值

Question

我有一个 SASS 变量：

$default-padding: 15px

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

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

我正在尝试设置一个局部变量（使用 Bourbon 的 strip-unit 方法）：

$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);
}

知道我做错了什么吗？

Answer 1

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

Answer 2

两件事：

好像没有找到strip-unit函数（为什么函数名称被打印出来）
你不应该对 $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);
}

SASS 计算插值

SASS Calc Interpolation

css

sass

bourbon