0

I'm trying to come up with a way of creating a class based theme using SASS but as i'm new to it I don't know enough to make it work or know whether my attempt is even worth it.

I want a theme to be based on a class which is set on either the HTML or Body tag. Then all colors and backgrounds etc are derived from that.

What I want SASS to do is handle all the leg work. Please excuse the crude example as I say I'm new to this:

$baseBackground: #0f0;

.blue { 
    $baseBackground: #0f0;
}
.red {
    $baseBackground: #0f0;
}
.header {
    background: $baseBackground;
}

If the code block above is SASS I want the CSS to end up like:

.header {
    background: #0f0;
}
.blue .header { 
    background: #00f;
}
.red .header{
    background: #f00;
}

I've no idea whether this is possible or not. Obviously the example above doesn't work. Is there a way to handle this without having to generate the additional styles?

Many thanks for your time.

Chris

4

1 回答 1

2

I think the best solution is probably one that uses SASS mixins. You can set up a mixin definition for your theme, with the various colors as arguments to the mixin. You can then call your mixins with different argument values for the various themes. Here's an example, extended from yours a little, that shows using multiple arguments and has both a "header" and a "footer" section:

@mixin theme($background-color, $text-color) {
    .header {
        background: $background-color;
    }

    .footer {
        background: $background-color;
        color: $text-color;
    }
}

@include theme(#0f0, white);

.blue {
    @include theme(#00f, lightgray);
}

.red {
    @include theme(#f00, gray);
}

The compiled CSS from this example would look like this:

.header {
    background: lime;
}
.footer {
    background: lime;
    color: white;
}

.blue .header {
    background: blue;
}
.blue .footer {
    background: blue;
    color: lightgrey;
}

.red .header {
    background: red;
}
.red .footer {
    background: red;
    color: gray;
}
于 2013-03-20T13:30:35.333 回答