Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


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


I have a view variables for colors in my scss file.

$green: #669966; $orange: #ff8200; $red: #d94040; $blue: #6dabff;

And I want to change the values of the variables to #333, in case the body has the class "body-kontrast".

Is this possible? I read about if statements in SASS but as far as I understood it is not possible.

I hope someone can help me :-)


3 Answers

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.

Tobias Helmrich
Tobias Helmrich
31,602 Points

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;

    .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.

But I definitely learned, this is not the best way to simplify colors in SASS. Next time I will make mixins for background and text color combinations and use them.