Is it possible to change the value of a variable - depending on the body class?

It is possible, what you need to do is create a media query and select the color you want to the element you want, or you can use an if statement, it works very much like a media query.

Hey Elke,

to answer your question directly: No. Unfortunately it's not possible to use an if statement in Sass to change variables if an element has a certain class directly as far as I know, because that involves dealing with the DOM which is JavaScript's job. However: You can still achieve what you want to achieve I think. :)

I'm sorry but I have to disagree with Jacob here because I think media queries are not for this kind of job because they're here to style your website for different screen sizes, not for different classes of the body but maybe I misunderstood you and I'm talking something stupid now, please tell me if it's like that! :)

I made an example in Codepen and I hope that it makes it quite clear how you could achieve it. You can find the example here

Just to explain the code a little: I made two divs to simulate two bodies, one without a class and one with the class body-kontrast. I filled both divs with 3 identical divs (one with the class red-box, one with the class blue-box and one with the class green-box). I then set the boxes' background to red, blue and green.

$red: red;
$green: green;
$blue: blue;

.red-box {
    background: $red;
}

.blue-box {
    background: $blue;
}

.green-box {
    background: $green;
}

But in the div with the class of body-kontrast I'm setting a variable $grey with the value #333 and then I'm nesting the three classes in .body-kontrast and I'm overwriting their background with $grey.

.body-kontrast {
    $grey: #333;

    .red-box,
    .blue-box,
    .green-box {
        background: $grey;
    }
}

I hope I understood your problem correctly and could help you a bit to solve it! Maybe my code could still be improved but I hope it shows you how to achieve what you want! If you have further questions feel free to ask them. Good luck! :)

Thank you so much for your answers! Unfortunately both ideas are not the ideal solution for me. I used the color variables on many different classes and want to avoid finding and redefining them all.

And I'm an absolute SASS beginner and only used it for color and font variables by now. But if you could do something like this with if statements it would be great!

if (body has class "body-kontrast") ===> $green = #333

else ===> $green = #669966

I read about if statements in SASS but as far as I see - there is no way to do this.