How to convert from native variables?

Question

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

Rowena.Rueck asked April 19th 20 at 12:07

Related questions

More answers about "How to convert from native variables?"

2 answers

ari.Rodrigu answered on April 19th 20 at 12:11

https://tutomath.ru/5-klass/delenie-drobej-pravila...

Jorge.King answered on · Accepted Answer · 2020-04-19T10:09:54.082Z

Jorge.King answered on 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