Adding two values in Sass function creates double instance of 'px'

Question

I have a custom function in Sass that takes an em value, strips the unit and creates a px value:

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

I am then attempting to take an em variable:

$em-variable: 1em;

And add it to a pixel-based variable:

$px-variable: 20px;

Example:

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

Which creates this output:

right: 20px16px;

I am expecting both values to be added:

right: 36px;

Answer 1

Your function is returning a string, not a number. Sass assumes that you want to concatenate them because that's all it can do with a string and any other type.

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