sass - 是否可以将(动态)单位添加到 sass 中的无单位数字？

Question

首先，我知道要将无单位值转换为有单位的值，我可以将无单位值乘以单个单位:

$value: 25 * 1px; // 25px

但是我想知道当单元是动态的时是否有任何方法可以做到这一点。

$unit: rem;
$value: 23;

.Box {
  // Try interpolation
  $united-value: #{$value}#{$unit};
  value: $united-value; // Appears to be correct
  // Check it is actually a number using unitless 
  check: unitless($united-value); // $number: "23rem" is not a number for `unitless'
}

显然，如果我要使 $unit 的值 1rem我可以像在第一个示例中那样进行乘法运算，但是有没有办法用裸单位值来做到这一点。

萨斯迈斯特 here

[编辑] 正如@zessx 正确指出的那样，CSS 不关心类型，并且在这种情况下会以相同的方式处理字符串和数字值。但是，一旦附加了单位，我就需要对该值执行操作。

[编辑] 我不知道我怎么能更清楚。我不想要/需要一个在幕后使用乘法的函数。我已经知道它是如何工作的以及如何去做。如果有一种方法可以获取无单位值和一个单位并从中得出一个统一的数字，我很感兴趣。

有没有办法拿 px和 22并制作 22px那是一个数字，可以对其进行数学运算吗？任何告诉我如何接受的答案 1px和 22做同样的事情并没有回答我要问的问题。

Answer 1

没有 sass 原生 实现目标的方式。问题是$unit是一个字符串，在 sass 中，与其他语言一样，当您使用字符串和数字进行操作时，它会自动连接两者并返回一个字符串。并且没有执行此操作的 native 函数，这是sass的创建者的原因:

these functions would encourage more sloppy code than they do add expressive power.

有关此主题的更多信息 here

替代品

因此，您只能使用乘法，正如您之前提到的，或者如果您不想使用乘法，则可以使用此函数将单位字符串转换为数字:

@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);
}

如您所见，它接受一个数字和一个单位作为参数，并将它们作为长度数字返回。因此，在您的情况下，您只需要更改此声明:

$united-value: #{$value}#{$unit};

通过这个其他:

$united-value: lenght($value, $unit);

这是来自 Hugo Giraudel's blog 的想法