将单位添加到Sass中的数字

Question

我正在尝试创建动态值，但到目前为止都失败了。创建的像素值似乎失去了在计算中使用的能力。

$numericValue: 30;

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

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

这会抛出错误

语法错误：未定义的操作：“30px乘以2”

Answer 1

当您想要添加单位时，诀窍是使用* 1px。使用+px或插值（#{$numericValue}px）将其转换为字符串。

$numericValue: 30;

$pixelValue: $numericValue * 1px;

$calc: $pixelValue * 2;

Answer 2

您需要定义要使用的单位。如果您使用像素，则可以创建动态值，将px添加到$numericValue。

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