CODEWITHSUNDEEP
sass
owzim
owzim

Reputation: 925

Adding a unit to a number in Sass

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"

Upvotes: 24

Views: 9389

Answers (2)

Rach Glucio
Rach Glucio

Reputation: 90

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;

Upvotes: 0

bookcasey
bookcasey

Reputation: 40473

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;

Upvotes: 33

Related Questions