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 :-)
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 Helmrich31,602 Points
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.
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.
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.