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"

Accepted Answer

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;
```

Adding a unit to a number in Sass

Solution

Problem