Как использовать css переменные в scss функциях?

Question

[Игорь Мясников]

Добрый день.
В проекте используется css-переменные и Scss. Возник вопрос , как использовать эти переменные в миксинах scss?

@function rem($px) {
	@return ($px / var(--font-size)) + rem;
}

html {
  --font-size: 16px;
}

Также не могу использовать их и со стандартными функциями Scss (rgba(var(--color-main), 0.5))

Answer 1

[Сергей delphinpro]

Это невозможно.

Scss файлы компилируются до выполнения в браузере. А значение css-переменной присваивается именно во время выполнения.

Попробуйте наоборот:

$font-size: 16px;

@function rem($px) {
  @return ($px / $font-size) + rem;
}

:root {
  --font-size: #{$font-size};
}

Comments

[Игорь Мясников]

Мне нужно через JS управлять шрифтом ,поэтому такой вариант не подходит.

[Сергей delphinpro]

Игорь Мясников, Значит стройте формулы на calc().