☰

SASS 単位付き乗算 質問する

tag-icon • tag-icon sass
SASS 単位付き乗算 質問する

単位付きの 2 つの値を乗算しようとすると、予期しないエラーが発生します。

$test: 10px;

.testing{
  width: $test * $test;
}
result: 100px*px isn't a valid CSS value.

ベストアンサー1

利用した補間以前、変数を使って計算をしたいときにこれを試したことがあり、これが最も簡単な解決策だと思っています。これがうまくいかない場合は、コンパイラの違いが原因かもしれません。

$test: 10px;

.testing{
  width: #{$test * 2};
}

実際、私の場合width: $test * 2;はコンパイルがwidth: 20pxうまくいって、簡単な計算に補間を使う必要さえありません。私はember-cli-sassを使っています。これはbroccoli-sass-source-mapsを使っていて、これはnode-sassを使っていて、これはlibsassをラップして、SCSSをCSSにコンパイルします。しかし、このjsbinCompass で SCSS を使用します。

補間が本当に役立つのは、 を使用する必要がある場合ですcalc。

$test: 10px;

.testing{
  width: calc(50% + #{$test * 2});  // results in calc(50% - 20px)
}

おすすめ記事