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的值，我可以像我的第一个例子那样繁殖，但是有没有办法用裸单位值来做到这一点。

Sassmeister here

[编辑]正如@zessx正确陈述的那样，CSS并不关心类型，并且在这种情况下将同样对待字符串和数字值。但是，一旦附加了单位，我需要对值执行操作。

[编辑]我不确定我怎么能更清楚。我不想要/需要一个在引擎盖下使用乘法的功能。我已经知道它是如何工作的以及如何做到这一点。我感兴趣的是，如果有一种方法可以获得无单位价值和一个单位，并从中获得统一数字。

是否可以采用px和22并使22px成为一个数字，并且可以对其执行数学运算？任何回答都告诉我如何处理1px和22并做同样的事情并不能回答我提出的问题。

Answer 1

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

这些功能会鼓励更多的草率代码，而不是增加表现力。

有关此主题的更多信息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

抓住的想法

Answer 2

即使$united-value 看起来像一个统一号码，它也只不过是一个字符串，因为Sass无法将“rem”字符串与“rem”单元区分开来。幸运的是，这个字符串将被任何CSS引擎解释。

您可以使用type-of()：

进行检查

$unit: rem;
$value: 23;

.Box {
  $united-value: #{$value}#{$unit};
  value: $united-value;
  check: type-of($united-value); // check: string;
}

AFAIK，将字符串强制转换为“rem”的唯一方法是使用* 1 rem。

<强> 编辑：
正如Alex Guerrero所提到的，Hugo Giraudel构建了一个将字符串转换为数字的函数，你应该看看on it blog。它的好处是你可以简单地写下这个：

$unit: rem;
$value: 23;

.Box {
  $united-value: number($value+$unit);
  value: $united-value; 
  check: unitless($united-value);
}

是否可以将（动态）单位添加到sass中的无单位数？

2 个答案: