SASS乘法单位

Question

如果我尝试将两个值乘以单位,则会出现意外错误.

$test: 10px;

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

Answer 1

我以前在使用变量进行数学运算时使用了插值,我认为这是最简单的解决方案.如果这对你不起作用,也许是由于编译器的不同？

$test: 10px;

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

实际上为我width: $test * 2;编译width: 20px,你甚至不需要使用插值来进行简单的数学运算.我正在使用ember-cli-sass,它使用broccoli-sass-source-maps,它使用包含libsass的node-sass将我的SCSS编译为CSS.但它似乎在这个使用SCSS和Compass的jsbin中运行良好.

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

$test: 10px;

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

Answer 2

SASS中的乘法单位就像物理 /工程/化学中的乘法单位/[此处插入科学]一样.

(有关详细信息,请访问https://www.sitepoint.com/understanding-sass-units/)

乘以两个像素值,将得到px ^ 2,这是一个区域,而不是距离.

你能做什么？如果您确定要乘以像素,请使用函数并除以1像素.

$test: 10px;

@function multiply-px($value1, $value2) {
  @return $value1 * $value2 / 1px;
}

.testing {
  width: multiply-px($test, $test);//100px
}

如果你不知道你将提前使用哪些单位,你可以从$ value2剥离单位,这样你总是得到$ value1的单位.

(详情请参阅https://css-tricks.com/snippets/sass/strip-unit-function/)

$test: 10in;

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function multiply-use-first-unit($value1, $value2) {
  @return $value1 * strip-unit($value2);
}

.testing {
  width: multiply-use-first-unit($test, $test);//100in
}

Answer 3

不能将两个 px 值相乘。更好的方法是函数，但你必须使用 add 来实现它：-

$test: 10px;

@function calc-width($value1, $value2) {
  @return $value1 + $value2;
}

.testing {
  width: calc-width($test, $test);
}