Is it possible to add a (dynamic) block per unit number in sass?
First of all, I know that to convert a dimensionless value to one with one, I can multiply the one value by one:
$value: 25 * 1px; // 25px
However, I would like to know if there is a way to do this when the device 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 had to make a value $unit
1rem
I could just multiply like in my first example, but is there a way to do this with a nude unit value.
Sassmeister here
[Edit] As @zessx correctly states, CSS doesn't care about type and will handle both string values and numbers in this case. However, I need to perform operations on the value after adding the block.
[Edit] I'm not sure how I can be clearer. I don't need / need a function that uses multiplication under the hood. I already know how it works and how it is done. I'm wondering if there is a way to take a unit value and a unit and make a single number out of it.
Is there a way to take px
and 22
and do 22px
that is a number and can do math on it? Any answer that shows me how I can take 1px
and 22
, and do the same, does not answer the question I am asking.
source to share
There is no sass native way to achieve your goals. The problem is what $unit
a string is and in sass, like other languages, when you do string and number operations, it automatically concatenates and returns the string. And there is no native function that does this operation, here's the reason for the creator of sass:
these functions will stimulate sloppy code than they add expressive power.
Read more about this topic here
Alternatives
So you can only use multiplication, as you mentioned earlier, or if you don't want to use multiplication, you can use this function to convert single strings to 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 one as arguments, and it returns them as a number. So in your case you only need to change this declaration:
$united-value: #{$value}#{$unit};
Others:
$united-value: lenght($value, $unit);
This is an idea taken from the Hugo Giraudel Blog
source to share
Even if $united-value
it looks like a concatenated number, it is nothing more than a string, since Sass cannot distinguish a "rem" string from a "rem" unit. Fortunately, this line will be interpreted by any CSS engine.
You can check it with type-of()
:
$unit: rem;
$value: 23;
.Box {
$united-value: #{$value}#{$unit};
value: $united-value;
check: type-of($united-value); // check: string;
}
AFAIK, the only way to distinguish a string as "rem" is to use effectively * 1 rem
.
EDIT:
As Alex Guerrero mentioned, Hugo Giredel built a function to draw a string to a number, you should really look at this blog . The good thing is you can just write this:
$unit: rem;
$value: 23;
.Box {
$united-value: number($value+$unit);
value: $united-value;
check: unitless($united-value);
}
source to share