0

I have file typography.scss and I've defined my fonts in :root css variable

:root {
  --configurable-font-family:'Roboto, "Helvetica Neue", sans-serif'
}

I'm trying to use the "--configurable-font-family" variable inside SASS function

@function typography-config (
  $body: typography-level(
   var(--custom-body-font-size, 1em),
   var(--custom-body-line-height, 1.2em),
   var(--custom-body-font-weight, null),
   var(--custom-body-font-family, var(--default-font-family, #{var(--configurable-font-family)}))),
  $body-bold: typography-level(
   var(--custom-body-bold-font-size, 1em),
   var(--custom-body-bold-line-height, 1.2em),
   var(--custom-body-bold-font-weight, 700),
   var(--custom-body-bold-font-family, var(--default-font-family, #{var(--configurable-font-family)})))
) {$config:(body: $body,body-bold: $body-bold)}

Not sure if it's possible, I'm unable to fix it

Mitul Panchal
  • 143
  • 2
  • 13
  • 1
    CSS custom properties **are *not* variables**. They can only be used in places where a CSS declaration is made. If you need variables in SASS, use SASS variables. – connexo May 10 '22 at 07:42
  • 2
    As per the duplicate: 1. The SASS compiler runs and outputs some CSS. 2. The CSS is sent to the browser. 3. The browser's CSS engine resolves the values of CSS custom properties. *You can't have those values during step 1 because they don't exist yet*. – Quentin May 10 '22 at 07:50

0 Answers0