Multiple themes using SASS

Question

I have a SASS built site, and I'd like to create a second color option for that site keeping the SASS code as DRY as possible.

One thought I had that partly works (and is here for clarity sake) is the following:

// regular theme (black)
@import "settings";
@import "styles";

// white theme
.white {
    @import "white_settings";
    @import "styles";
}

The above works for simple _styles.scss files, but when I try to use the same approach with Foundation @import "foundation", it only wraps some of the styles that in included in Foundation.

So my question is, is there any way to extend the styles I already have with a wrapping class (that would be set on the body tag) that would allow me to easily switch the color theme of the site without repeating the entire collection of SASS rules?

Optimal solution would also not repeat non-changed CSS properties like margin and padding, and only change the colors (which would be the only portion that would be different, and those are set in the settings).

Answer 1

Foundation has all of its styles wrapped in a mixin that prevents repeating it (ie. import once). This prevents you from reusing the code with different colors or other settings. Looking over the source of the mixin in question, you should be able to trick it into thinking the "module" hasn't been imported like this:

// the modules we want to import haven't been imported yet
$temp-modules: $modules;
.one {
    // do some one specific stuff here
    @import "styles";
}
// set $modules back to the state it was in before we did our import
$modules: $temp-modules;
.two {
    // do some two specific stuff here
    @import "styles";
}
// repeat as necessary