首先，我知道要将无单位值转换为单位值，我可以将无单位值乘以一个单位：
$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 在这里
[编辑]正如@zessx正确陈述的那样，CSS并不关心类型，并且在这种情况下会同时处理字符串和数字值。 但是，一旦附加了单位，我需要对值执行操作。
[编辑]我不确定我怎么能更清楚。 我不想/需要一个在引擎盖下使用乘法的函数。 我已经知道它是如何工作的以及如何做到这一点。 我感兴趣的是，如果有一种方法可以获得无单位价值和一个单位并从中获得统一数字。
有没有办法获取px和22并使22px成为一个数字并且可以对其执行数学运算？ 任何回答，告诉我如何采取1px和22并做同样的事情是没有回答我问的问题。
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; // 25pxHowever 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' }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 here
[Edit] 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.
[Edit] 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.
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.
最满意答案
没有任何本土方式来实现您的目标。 问题是$unit是一个字符串，在sass中，就像其他语言一样，当你用字符串和数字进行操作时，它会自动连接并返回一个字符串。 并且没有执行此操作的本机函数，这是sass的创建者的原因：
这些功能会鼓励更多的草率代码，而不是增加表达能力。
这里有关于此主题的更多信息
备择方案
因此，您只能使用乘法，如前所述，或者如果您不想使用乘法，则可以使用此函数将单位字符串转换为数字：
@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的博客抓住的一个想法
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
Alternatives
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};By this other:
$united-value: lenght($value, $unit);This is an idea grabbed from Hugo Giraudel's blog
更多推荐
发布评论