sass - 在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
}