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;

$pixelValue: $numericValue+px;
// also tried $pixelValue: #{$numericValue}px;

$calc: $pixelValue * 2;
// also tried $calc: unquote($pixelValue) * 2;

This throws an error

Syntax error: Undefined operation: "30px times 2"

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;