Improve page-specific CSS for different color schemes
Some days passed and I feel like I should share the changes I have made so far.

Naming

I started using page names instead of color names on classes and variables. This leaves me with the benefit of being able to change the color scheme of an entire page only by changing the value of the color variable.

.page--home       -&gt; .page--blog
.nav__item--green -&gt; .nav__item--blog
$green-color      -&gt; $blog-color


Generating page-specific CSS with a mixin


I need to style certain elements depending on the class I assign to the root element (e.g. &lt;html class=page--blog&gt;)
The needed arguments I pass to the mixin are $element (a selector like .site-nav or h1) and $property (a CSS property like color)
There also is an optional argument which allows me to switch to light color variations


Mixin:

@mixin themify($element, $property, $light-colors: false) {
    $pages: null;
    @if $light-colors == true {
        $pages: blog      $green-color-light,
                portfolio $orange-color-light,
                profil    $blue-color-light,
                impressum $red-color-light;
    } @else {
        $pages: blog      $green-color,
                portfolio $orange-color,
                profil    $blue-color,
                impressum $red-color;
    }

    @each $page in $pages {
        .page--#{nth($page, 1)} #{$element} {
            #{$property}: nth($page, 2);
        }
    }
}

/* Call the mixin without optional argument */
@include themify(site-nav, background-color);

/* ...use the light colors instead of the normal ones */
@include themify(site-nav, background-color, $light-color: true);


Problems with the mixin:


I can't pass a list of selectors like a, h1, h2, h3, h4, h5, h6 &ndash; Didn't find a solution so far (probably going to involve multi-dimensional lists)
Still creates the bloated CSS, but eases my work


I still would love to hear some suggestions/improvements.