Adding white space in SASS declaration

90 Views Asked by At

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?

0

There are 0 best solutions below