Как правильно использовать Var () и cal () в Ionic 5 с Sass

Question

У меня проблемы с использованием функций var и calc в сочетании друг с другом. Вот мой сценарий

--variable-1 : 10px;
--variable-2 : 20px;
--variable-3 : calc(var(--variable-1) + var(--variable-2));
.some-class {
  width: var(--variable-3); // does not work
}

Может кто-нибудь объяснить, почему это не работает?

После некоторых ответов, предлагающих использовать $ для объявления переменных, я более заинтересован, чтобы понять, как - переменные работают,и почему есть 2 способа определения переменных.

в чем разница между $ some-variable и --some-variable?

Answer 1

Вам необходимо интерполировать переменную при использовании ее в функции calc. Вы можете сделать это примерно так.

Вот пример, который я изменил ваш код, вы можете посмотреть.

$variable-1 : 12em;
$variable-2 : 4em;

.some-class {
  width: calc(#{$variable-1} + #{$variable-2});
  background-color: red;
  height: 100px;
}

<div class="some-class"></div>

Answer 2

Попробуйте вот так

$a: 4em;
$b: 4em;

div {
  height: $a + $b;
  background: red;
}