javascript – SASS variables right into: origin are not inserted

August 22, 2023

6

I wish to bypass base-font-size by calling a feature, its interpretation is offered listed below

 export const changeBaseFontSize = (newSize: string) => > {
document.documentElement.style.setProperty("-- base-font-size", newSize);.
};.

Calling this feature as offered listed below

 changeBaseFontSize(" 16");.

Currently, I have a feature which will certainly transform the supplied pixel worth right into rapid eye movement relying on the base-font-size worth

 @function pxToRem($ pxValue) {
$ baseFont: var(-- base-font-size);.
$ remValue: # {$pxValue/ $baseFont};.
@return $remValue + rapid eye movement;.
}

Currently when I am calling this feature from scss data as offered listed below

 n-code-input-field {
border-radius: pxToRem( 16 );.
}

When I am running this code it is using the designs as offered listed below

 n-code-input-field {
border-radius: 16/var(-- base-font-size) rapid eye movement;.
}

These boundary designs are not functioning

yet If I straight include the base-font-size as 16 it is functioning penalty

 @function pxToRem($ pxValue) {
$ baseFont: 16;.
$ remValue: # {$pxValue/ $baseFont};.
@return $remValue + rapid eye movement;.
}

This is functioning penalty as it is returning 1rem

 @function pxToRem($ pxValue) {
$ baseFont: 16;.
$ remValue: # {$pxValue/ $baseFont};.
@return $remValue + rapid eye movement;.
}

border-radius: 1rem;

Just how Can I repair it?

Preferably It ought to return the computed rapid eye movement worth