Adding two values ​​to the Sass function creates a double instance of 'px'

Question

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

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

Then I try to take the em variable:

 $em-variable: 1em; 

And add it to the pixel variable:

 $px-variable: 20px; 

Example:

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

What creates this conclusion:

 right: 20px16px; 

I expect both values ​​to be added:

right: 36px;

Answer 1

Your function returns a string, not a number. Sass suggests that you want to bind them, because all of this can be done with string and any other type.

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