How to convert from native variables?

border-radius: calc(var(--icon-size) / 2) / var(--icon-size);

how to convert from native variables?

try

$size = 36px;
border-radius: calc(($size/2) / $size);

does not compile
errors Galp does not
April 19th 20 at 12:07
2 answers
April 19th 20 at 12:09
Solution
$size: 36px;
border-radius: calc(#{($size/2) / $size});


$size: 36px;
$result: ($size/2) / $size;
border-radius: calc(#{$result});


$size: 36px;
border-radius: calc((#{$size}/2) / #{$size});


But all this does not make sense in this case. You may simply calculate and insert the value:
$size: 36px;
border-radius: (($size/2) / $size);
@Jorge.King, all the same error - Rowena.Rueck commented on April 19th 20 at 12:12
@Rowena.Rueck, what? - Jorge.King commented on April 19th 20 at 12:15
@Jorge.King, chrome just crosses out all
that's part of the code

https://jsfiddle.net/cxbj6pwg/ - Rowena.Rueck commented on April 19th 20 at 12:18
@Jorge.Kingwasn't looking? - Rowena.Rueck commented on April 19th 20 at 12:21
chrome just crosses out all

Because ($size / 2) / $size is always 0.5 no matter what value is in $size (unless it's numeric)
0.5 (no units of measurement) - not a valid value for border-radius

And they say that math programmers don't need... Well, at least the basic arithmetic need to know... - ari.Rodrigu commented on April 19th 20 at 12:24
@ari.Rodrigu , very funny - Rowena.Rueck commented on April 19th 20 at 12:27
@Rowena.Rueck, nothing funny... - ari.Rodrigu commented on April 19th 20 at 12:30
@ari.Rodrigu, sorry
but YOU just napisali as it is generally
don't quite understand the error - Rowena.Rueck commented on April 19th 20 at 12:33
@Rowena.Rueck, the problem is that in the original example You have no division, and in scss - division - ari.Rodrigu commented on April 19th 20 at 12:36
@ari.Rodrigu, I've corrected
https://jsfiddle.net/L50njg1t/7/

but the color doesn't want - Rowena.Rueck commented on April 19th 20 at 12:39
@Rowena.Rueck, @Rowena.Rueck, Right Dmitry said, there is no division, and specifying different radii along the axes. I didn't notice

$size: 32px;
border-radius: calc($size / 2) / $size;
border-radius: ($size / 2) / $size;
- Jorge.King commented on April 19th 20 at 12:42
@Jorge.King, thank you
and the color how?
change background-color: var(--icon-bg-fb, gray);
on background-color: ($icon-bg-fb, gray);

not working - Rowena.Rueck commented on April 19th 20 at 12:45
@Rowena.Rueck, the second argument var is a default value.

Analogue:
$icon-bg-fb: gray; // initially set the default value

.s {
 $icon-bg-fb: red; // And if needed, overwrite it
 background-color: $icon-bg-fb;
}
- Jorge.King commented on April 19th 20 at 12:48
April 19th 20 at 12:11

Find more questions by tags SassHTML