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;

Answer 2

You need to define the unit you will use. If you are working with pixels you can create dynamic values adding px to the $numericValue.

$numericValue: 30px;
$pixelValue: $numericValue;
$calc: $pixelValue * 2;