Использование результата функции scss для инициализации пользовательского свойства CSS

каждый!

У меня есть эта структура файлов

_utils.scss
_variables.scss
styles.scss

в style.scss я импортирую каждую часть с помощью:

@use "utils" as *;
@use "variables";
body {
  min-height: 100vh;
  background-color: var(--cl-primary);
  font-size: var(--fs-normal);
}

Содержимое _utils.scss следующее:

@use "sass:math";
/// Converts PX to REM
/// @access public
/// @param {string} $size - Value to be converted in PX.
/// @returns {string} - Returns REM string.
/// @example font-size: rem(24px);
/// @returns font-size: 1.5rem;
@function toRem($size) {
  $remSize: math.div($size, 16px);
  @return #{$remSize}rem;
}

А содержимое _variables.scss следующее:

:root {
  --cl-primary: #3829e0;
  --cl-primary-tint: #e0e8ff;

  --fs-normal: toRem(32px);
}

Вопросы:

Почему на веб-странице пользовательское свойство CSS --fs-normal оценивается как «toRem(32px)» вместо 2rem?

Второй вопрос: что мне делать, чтобы --fs-normal оценивался как 2rem?

Спасибо вам всем!

Обновлено: я пытался воспроизвести данное решение на скрипке: https://jsfiddle.net/mihai3636/fcjspt1v/24/

РЕДАКТИРОВАТЬ2:

ОТВЕЧАТЬ:

Помимо интерполяции строк мне следовало добавить эту строку внутри _variables.scss:

@use "./utils" as *;

Пожалуйста, прочитайте последний комментарий Инвулнера к ответу.

Итак, чтобы работать, _variables.scss должен выглядеть следующим образом:

@use "./utils" as *;
:root {
  --cl-primary: #3829e0;
  --cl-primary-tint: #e0e8ff;

  --fs-normal: #{toRem(32px)};
}

🤔 А знаете ли вы, что...
CSS используется для определения внешнего вида и форматирования элементов веб-страницы.