Design patterns for writing multiple themes in Stylus/Sass?

Question

I'm writing a stylesheet for a web site where I need to support multiple skins/themes. For example, one theme might be black-on-white with red as the primary color, and another theme might be white-on-black with maroon as the primary color.

Almost all of the CSS from one theme translates over to the other theme, except for things like foreground and background color.

As an illustrative example, say we have a div. The size and position of that div is fixed between themes, but the color might change. We could separate this into three different CSS files like so:

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

Then the end user would load main.css plus one of the theme stylesheets. Another design would be to put a class on the body element, and use selectors to apply the right colors, all in one CSS file. For example,

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

The advantage of the second option is that there are fewer HTTP requests. The advantage of the first option is that the user needs to load less data from the server. This is especially important when there are many different themes, and (as in my use case) when inlined background images significantly increase the weight of the CSS files.

So my question is, how can I leverage the power of CSS pre-processors like SASS or Stylus to create multiple CSS theme files?

I envision something like this maybe:

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;

    background-color: $primaryColor;
}

which would in turn generate the three CSS files listed above in the first example.

Any ideas? Does something like this already exist?

Are you using Sass or Stylus? They are not the same thing: pick one or the other. Have you tried anything? — cimmanon
I'm currently using Stylus in my project, so a Stylus solution is preferred. It's early enough though that if something like this existed in SASS instead, I can make the switch. — sffc

sffc sffc · Accepted Answer · 2015-07-05T09:35:04

Here's how I ended up doing this. Make three Stylus files: main.styl, theme1.styl, and theme2.styl. Then edit their content as shown below:

// theme1.styl
primaryColor = red
@require("main.styl")

// theme2.styl
primaryColor = maroon
@require("main.styl")

// main.styl
#box {
    top: 50px
    left: 50px
    width: 200px
    height: 200px
    background-color: primaryColor
}

Then what you end up with is a theme1.css and a theme2.css that contain all of the definitions for the application with their respective theming. (You won't need to use main.css any more.)

Design patterns for writing multiple themes in Stylus/Sass?

2 Answers