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\"

回答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;

回答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;