Scss variable not resolving to actual value

After initializing a scss variable with a css variable and a fallback value using this manner

$BaseFontSize: var(--BaseFontSize, 10px);

I am trying to use BaseFontSize in a function, but it throws the following error:

> Error: Undefined operation "40px/var(--BaseFontSize, 10px) * 1rem".

The function which is throwing the error:

@function px-to-rem($px) {
  $convertedValue: ($px / $BaseFontSize) * 1rem;
  @return $convertedValue;
}

Usage in Code:

.className{
  padding: px-to-rem(40px);
}

CSS variables are only resolved during runtime; when CSS styles are applied and a DOM exists. (the DOM nesting is relevant for variable resolution)

SCSS variables, functions, and mixins are purely SASS preprocessor features and are resolved/executed only during the build process. At that point in time there is no DOM, no nesting, and no applied css styles; and SASS treats the value assigned to your SCSS variable as merely a string.

$base-font-size: var(--base-font-size, 10px);

is treated exactly like

$base-font-size: "var(--base-font-size, 10px)";

You could update your function and how you use it to achieve a similar result:

You will need to remove the unit from your css variable, and the argument passed to the function: --BaseFontSize: 16;, font-size: px-to-rem(32);
.

Then, update the function to use calc(): calc(#{$px}rem / var(--BaseFontSize));.

:root {
  --BaseFontSize: 16;
}

$BaseFontSize: var(--BaseFontSize);

@function px-to-rem($px) {
  @return calc(#{$px}rem / var(--BaseFontSize));
}

p {
  font-size: px-to-rem(32);
}

The compiled CSS will look like this:

:root {
  --BaseFontSize: 16;
}

p {
  font-size: calc(32rem / var(--BaseFontSize));
}