0

I'm trying to produce the following SASS code, using a variable that stores the weight for a variable font:

$normal-font: 335;

:root {
   font-weight: $normal-font;
   font-variation-settings: "wght" #{$normal-font};
}

The CSS result (using dart-sass) needs to be:

:root {
   font-weight: 335;
   font-variation-settings: "wght" 335;
}

Instead, the white space between the two components is being stripped by the processor and I'm getting:

:root {
   font-weight: 335;
   font-variation-settings: "wght"335;
}

Nothing I've tried achieves the desired result. Inserting the unicode "\0020", for some reason produces:

font-variation-settings: "wght"\ 335

while font-variation-settings: "wght" " " #{$normal-font} wraps the white space in quotes:

font-variation-settings: "wght"" "335

If I try to remove those quotes using unquote, like this font-variation-settings: "wght" unquote(" ") #{$normal-font}, the resulting CSS strips the white space out:

font-variation-settings: "wght"335;

No combination of the above techniques seems to work. Any suggestions?

Donald Jenkins
  • 3,485
  • 8
  • 33
  • 35
  • 1
    If you are writing SASS, dont use the Root declaration. When using root, use variables like this: --normal-font: 335. You dont want to mix SASS and CSS variables – Brad Apr 26 '23 at 04:31

0 Answers0