管道两个 SCSS 函数时，乘法操作数无效

Question

我正在研究 SASS 单位换算函数，我定义了两个函数：

convert-units(...);
strip-units(...);

两者都可以很好地单独工作，直到我把一个管到另一个，就像这样：

strip-units( convert-units(...) );

结果出现以下错误：

invalid operands for multiplication on line 68 at column 23

我尝试将 convert-units() 的手动结果复制到 strip-units()，它工作正常。

这是工作示例： http://sassmeister.com/gist/b5c61fc7baec1e3bec1f 请滚动到底部，直到找到评论的 pipe: strip-units(... 片段。

如有任何帮助，我们将不胜感激。

Answer 1

这是因为$pxValue / $size + $outputUnit行实际上并没有创建一个带单位的数字，而是一个看起来完全一样的字符串。在 sass 中没有简单的方法将单位添加到数字，但我找到了一个答案 in this question（还有一些关于为什么没有简单方法的背景知识）：

@function length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);

  @if not $index {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }

  @return $number * nth($units, $index);
}

然后只需执行 $outputValue: length($pxValue / $size, $outputUnit); 即可。

参见my gist（我无法让 SassMeister 保存我更新的代码，不知道为什么）

管道两个 SCSS 函数时，乘法操作数无效

Invalid operands for multiplication when piping two SCSS functions

html

css

sass

compass-sass