As of Sass v3.3 you could try out maps - sounds like this could be a very nice case for using them. They allow you to store keys and their values in one map variable:
$brand_clr: (home: blue, about: orange, contact: yellow);
Then you can access a single value by its key using the get-map()
function:
background: map-get($brand_clr, about);
Then you can loop through the map and avoid a lot of hardcoding:
@each $brand, $clr in $brand_clr {
body.#{$brand} {
background: $clr;
}
// and other selectors that change with the brand
}
Or even better - design a mixin that you can include in any rule set:
$color: red !default; // some default color - will be overwritten by brand color
@mixin branding {
@each $brand, $clr in $brand_clr {
&.#{$brand} {
$color: $clr;
@content;
}
}
}
body {
@include branding {
background: $color;
}
}
If you are on Sass <=3.2 you can achieve a similar thing with lists instead of maps:
$brand_clr: (home, blue), (about, orange), (contact, yellow);
and in the mixin you can access the individual values by it's index using nth()
:
$color: null;
@mixin branding {
@each $brand in $brand_clr {
&.#{nth($brand,1)} {
$color: nth($brand,2);
@content;
}
}
}