I'm looking for a simpler/better way for changing some colors when a certain class is applied to the body tag.
I hope you know what i mean...
Markup:
<body class="b1">
CONTENT
</body>
<body class="b2">
CONTENT
</body>
SCSS:
// colors
$b1: #505a73;
$b2: #aa3333;
$b3: #484733;
body.b1 {background: $b1;
#div1 {border: 10px solid $b1;}
.class1 .label{color: $b1;}
#nav li a{color:$b1;border: 4px solid $b1;}
#nav2 li a{color:$b1;}
#div2 .label {color:$b1;}
}
body.b2 {background: $b2;
#div1 {border: 10px solid $b2;}
.class1 .label{color: $b2;}
#nav li a{color:$b2;border: 4px solid $b2;}
#nav2 li a{color:$b2;}
#div2 .label {color:$b2;}
}
body.b3 {background: $b3;
#div1 {border: 10px solid $b3;}
.class1 .label{color: $b3;}
#nav li a{color:$b3;border: 4px solid $b3;}
#nav2 li a{color:$b3;}
#div2 .label {color:$b3;}
}
@lamotta solution may be slightly better semantically. However maybe a less complex solution would be just to use a mixin.
$b1: #505a73;
$b2: #aa3333;
$b3: #484733;
@mixin change-colour($class, $colour) {
&.#{$class}{
background: $colour;
#div1 {
border: 10px solid $colour;
}
.class1 .label{
color: $colour;
}
#nav li a{
color:$colour;
border: 4px solid $colour;
}
#nav2 li a{
color:$colour;
}
#div2 .label {
color:$colour;
}
}
}
body {
@include change-colour(b1, $b1);
@include change-colour(b2, $b2);
@include change-colour(b3, $b3);
}
Also, I have spread the code out a little but by writing your code like that its much easier to read. You can get SASS to compile a minified version anyway so I like to have my scss
files as readable as possible for other developers.