带单位的 SASS 乘法

Question

如果我尝试将两个值与单位相乘，则会出现意外错误。

$test: 10px;

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

Answer 1

我用过 interpolation过去当我想用变量做数学时，我认为这是最简单的解决方案。如果这对您不起作用，也许是由于编译器的不同？

$test: 10px;

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

事实上 width: $test * 2;编译为 width: 20px对我来说，你甚至不需要对简单的数学使用插值。我正在使用 ember-cli-sass，它使用 broccoli-sass-source-maps，它使用 node-sass，它包装 libsass，将我的 SCSS 编译为 CSS。但它似乎在 this jsbin 中工作正常它使用 SCSS 和 Compass。

如果您需要使用 calc，插值真正有用的地方是.

$test: 10px;

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