Как переделать из нативных переменных?

Question

[Antonio09]

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

как переделать из нативных переменных?

пробую

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

не компилируется
ошибок галп также не выдает

Comments

[Дмитрий Беляев]

calc уберите
в нем обязательно должно быть выражение, а после sass останется единственное значение

[Дмитрий Беляев]

($size/2) / $size

чет мне подсказывает, что $size здесь вообще сократится...

[Antonio09]

Дмитрий Беляев, не сократиться
вот часть кода

https://jsfiddle.net/cxbj6pwg/

[Дмитрий Беляев]

Antonio09, проинспектируйте 123:

[Дмитрий Беляев]

Antonio09, а еще решите уравнение:(x / 2) / x = 0.5чему равен x?

[Antonio09]

Дмитрий Беляев, Вы накурились?

Answer 1

[Сергей delphinpro]

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

Только все это не имеет смысла в данном случае. Можно просто посчитать и вставить значение:

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

Comments

[Antonio09]

Сергей delphinpro, все-равно ошибка

[Сергей delphinpro]

Antonio09, какая?

[Antonio09]

Сергей delphinpro, хром просто зачеркивает и всё
вот часть кода

https://jsfiddle.net/cxbj6pwg/

[Antonio09]

Сергей delphinpro, не смотрели?

[Дмитрий Беляев]

хром просто зачеркивает и всё

Потому что ($size / 2) / $size всегда будет 0.5 не зависимо от того, какое значение будет в $size (если конечно оно числовое)
0.5 (без едениц измерения) - не валидное значение для border-radius

А еще говорят, что математика программистам не нужна... Ну хоть базовую арифметику то знать надо...

[Antonio09]

Дмитрий Беляев , очень смешно

[Дмитрий Беляев]

Antonio09, ничего смешного...

[Antonio09]

Дмитрий Беляев, извините
но ВЫ просто насписали как то обобщенно
не совсем понятна ошибка

[Дмитрий Беляев]

Antonio09, проблема в том, что в исходном примере у Вас не деление, а в scss - деление

[Antonio09]

Дмитрий Беляев, я вот поправил
https://jsfiddle.net/L50njg1t/7/

но цвет не хочет

[Сергей delphinpro]

Antonio09, Antonio09, Верно Дмитрий сказал, там не деление, а указание разных радиусов по осям. Я и не заметил

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

[Antonio09]

Сергей delphinpro, спасибо
а цвет как?
меняю background-color: var(--icon-bg-fb, gray);
на background-color: ($icon-bg-fb, gray);

не работает

[Сергей delphinpro]

Antonio09, второй параметр var - это значение по умолчанию.

Аналог:

$icon-bg-fb: gray; // вначале задаете дефолтное значение

.s {
  $icon-bg-fb: red; // И если нужно, перезаписываете его
  background-color:  $icon-bg-fb;
}

Answer 2

[Дмитрий Беляев]

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