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