Adding a unit to a number in Sass

Question

I am trying to create dynamic values, but have failed so far. The created pixel value seems to lose the ability to be used in calculations.

$numericValue: 30         


        

Answer 1

The trick is to use * 1px when you want to add a unit. Using +px or interpolation (#{$numericValue}px) turns it into a string.

$numericValue: 30;

$pixelValue: $numericValue * 1px;

$calc: $pixelValue * 2;