Changing scss variable in runtime

Question

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'; } 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: The problem :

.element {
    @if $language == 'ar' {
        background-color: aqua;
    }@else if $language == 'fr' {
        background-color: red;
    }
}

Any Help Please?

I try this but not working it's just going to the first condition

.element{
    @if $language == 'var(#{--lang})' {
        content: $langua;
        background-color: aqua;
    }@if $language == 'var(#{--lang})' {
        content: $langua;
        background-color: blueviolet;
    }
}

score 0 · Answer 1 · answered Nov 14 '22 at 12:54

According to this question, it is not possible or at least easy to change SCSS variables with "JavaScript". So if you want to for example set background-color of .element tag according to your language, I suggest that use data- attributes in your "html" file and set your SCSS for all languages you need like the code below:

HTML,CSS,JS example codes:

if (localStorage.getItem("lang") === null) {
    localStorage.setItem("lang", "fr");
}

let allParVar = document.getElementById("allParent");

if (localStorage.getItem("lang") === "fr") {
    allParVar.setAttribute("data-lang", "fr");
} else {
    allParVar.setAttribute("data-lang", "ar");
}

function changeColor() {
    /* you can set "localStorage" in the way you want */
    let langVar = localStorage.getItem("lang");

    if (langVar === "fr") {
        localStorage.setItem("lang", "ar");
        /* I intentionally reload page to see the effect of changing color, maybe you don't need that in your project. */
        location.reload();
    } else {
        localStorage.setItem("lang", "fr");
        location.reload();
    }
}

:root #allParent[data-lang="ar"] .element {
    background-color: aqua;
}
:root #allParent[data-lang="fr"] .element {
    background-color: red;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS-variables</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="allParent" data-lang="">
<div class="element">
    some text
</div>
<div>
    <button onclick="changeColor()">change</button>
</div>
<script src="codes.js"></script>
</body>
</html>

In the codes above I pasted compiled SCSS (means CSS) codes. the original SCSS codes may be something like the code below:

:root #allParent[data-lang="ar"] {
    /* you can set SCSS variables for each lang, If you want */
    .element {
        background-color: aqua;
    }
}

:root #allParent[data-lang="fr"] {
    .element {
        background-color: red;
    }
}

Changing scss variable in runtime

1 Answers1