SASS Calc插值

Question

我有一个SASS变量：

$default-padding: 15px

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

我需要根据$ default-padding变量的值进行各种计算。 例如，宽度为100％-（2 * $ default-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

两件事情：

1. 似乎未找到剥离单元功能（为什么打印出功能名称）
2. 您不应该插值$ 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);
}

Answer 2

波旁威士忌功能是strip-units而不是strip-unit -更改此选项可以解决您的问题