sass - Sassの数値に単位を追加する

Question

動的な値を作成しようとしていますが、今のところ失敗しています。作成されたピクセル値は、計算で使用する機能を失っているようです。

$numericValue: 30;

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

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

これはエラーをスローします

構文エラー：未定義の操作： "30px x 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;