是否可以在sass中将(动态)单位添加到无单位数中? [英] Is it possible to add a (dynamic) unit to a unitless number in sass?

问题描述

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

First of all, I am aware that to turn a unitless value into one with a unit I can multiply a unitless value by a single unit:

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

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

However I would like to know if there is any way to do this when the unit is dynamic.

$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的值相等，我可以像第一个示例那样乘以，但是有一种方法可以使用裸单位值来实现.

Obviously if I was to make the value of $unit 1rem I could just multiply as in my first example, but is there a way to do this with a naked unit value.

Sassmeister 此处

Sassmeister here

正如@zessx正确指出的那样，CSS不在乎类型，因此在这种情况下将对字符串和数字值进行相同的处理.但是，一旦添加了单位，我就需要对该值执行操作.

As @zessx correctly states, CSS doesn't care about the type and will treat both string and number values identically in this case. However I need to perform operations on the value once the unit has been appended.

我不确定如何使自己更清晰.我不需要/不需要在后台使用乘法的函数.我已经知道它是如何工作的以及如何做到的.我很想知道是否有一种方法可以获取无单位的值和单位，并从中得出一个统一的数字.

I'm not sure how I can be any clearer. I don't want / need a function that uses multiplication under the hood. I already know how that works and how to do it. I am interested if there is a way to take a unitless value and a unit and make a united number out of it.

是否有一种方法可以取px和22并将22px设为数字并且可以对其执行数学运算?任何显示我如何使用1px和22并执行相同操作的答案都不能回答我所问的问题.

Is there a a way to take px and 22 and make 22px that is a number and can have mathematical operations performed on it? Any answer that shows me how I can take 1px and 22 and do the same thing is not answering the question I'm asking.

推荐答案

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

There's no sass native way to achieve your goals. The problem is that $unit is a string and in sass, like other languages, when you make operations with a string and a number, it automatically concatenates both and returns a string. And there is no native function that performs this operation, here's the reason of the creator of sass:

这些函数鼓励的草率代码要比它们增加表达力的要多.

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

有关此主题的更多信息此处

More info about this topic here

替代

因此，您只能使用乘法(如前所述)，或者如果不想使用乘法，则可以使用此函数将单位字符串转换为数字:

So you can only use multiplication, as you've mentioned before or if you don't want to use multiplication you can use this function to convert unit strings into numbers:

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

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

As you can see, it takes a number and a unit as arguments and it returns them as a length number. So in your case, you only need to change this declaration:

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

通过其他方式:

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

这是从 Hugo Giraudel的博客

这篇关于是否可以在sass中将(动态)单位添加到无单位数中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！