在Sass函数中添加两个值会创建'px'的双实例

Question

我在Sass中有一个自定义函数，它接受一个em值，剥离单位并创建一个px值：

@function stripAndPx($in){
  $stripped: $in / ($in * 0 + 1); //strip unit
  @return #{ (($stripped) * 16) + 'px'}; //convert to px
}

然后我尝试使用em变量：

$em-variable: 1em;

并将其添加到基于像素的变量中：

$px-variable: 20px;

示例：

right: $px-variable + (stripAndPx($em-variable));

创建此输出：

right: 20px16px;

我希望添加两个值：

right: 36px;

Answer 1

您的函数返回的是字符串，而不是数字。 Sass假设您想要连接它们，因为它可以用字符串和任何其他类型来完成它。

@function stripAndPx($in){
  $stripped: $in / ($in * 0 + 1); //strip unit
  @return (($stripped) * 16) * 1px; //convert to px
}