Question

如果我尝试将两个值乘以单位，我会收到意外错误。

$test: 10px;

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

Answer 1

SASS中的乘法单位就像物理中的乘法单位一样 / engineering / chemistry / [在这里插入科学]。

（详见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 2

我过去曾使用过interpolation，当我想用变量做数学时，我觉得这是最简单的解决方案。如果这对您不起作用，可能是因为编译器存在差异？

$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的this jsbin中正常工作。

如果需要使用calc，插值确实有用。

$test: 10px;

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

Answer 3

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

$test: 10px;

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

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

Answer 4

//try this

$test: 10;

.testing{
  width: $test * $test px;
}

SASS乘法单位

4 个答案: