SASS Calc Interpolation

Question

我有一个sass变量：

$default-padding: 15px

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

我有各种计算可以根据$ default-padding变量的值进行。例如，宽度将为100％ - （2 * $默认板）。左侧和右侧有填充。

我正在尝试设置局部变量（使用波旁威士忌的带状单位方法）：

$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-light（它将变量值变成字符串） - 使用乘法。

示例：

@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-更改此问题应解决您的问题