Changing scss variable in runtime

[Zack101]

Hi I have a variable on style-rtl.scss file : $language: var(--lang);

and that variable got defined in the root on style.css :

:root {

--lang: 'selectedLang';

}

and in the main.js file:

let language = localStorage.getItem("lang"); //ar/fr

let r = document.querySelector(':root');

let rs = getComputedStyle(r);

r.style.setProperty('--lang', language);

let result = rs.getPropertyValue('--lang');

console.log(result); // fr

when i try to use this language variable on style-rtl.scss file it's read without problem :

.element {

content: $language;

}

But the problem is when I try to use it on if condition:

.element {

u/if $language == 'ar' {

background-color: aqua;

}@else if $language == 'fr' {

background-color: red;

}

}