Generate theme files in SASS / SCSS

Question

I have theme.scss SCSS file which contains something like that

// global variables
@import "variables";

// SCSS placeholders
@import "placeholders";

// basic HTML styles - links etc.
@import "basic";

// default layout styles 
@import "layout";

/* COMPONENTS */
@import "components/layout/header"; // top page header
@import "components/layout/heading"; // main page heading

//etc. etc. a lot of another components

And it generates one output CSS file. Now I need to generate 3 different color themes (differenet CSS files). So I've created 3 SCSS files theme1.scss, theme2.scss and theme3.scss. They have the same content with only one difference:

@import "variables";

Variables will be specific for each theme. Yeah, everything works. But everytime I need to create another theme, I'll need to create another SCSS file and copy-paste whole includes from previous theme file. Is there any way how can I create my theme1.scss, theme2.scss, theme3.scss without creating 3 duplicated files?

Answer 1

You couldn't do it with @mixin, currently Import directives not working inside mixin becuuse of this issue https://github.com/sass/sass/issues/451

@mixin apply-theme($theme) {
    @if $theme == 'red' {
        @import 'variables-red';
    } @else if $theme == 'green'{
         @import 'variables-green';
    } @else{
         @import 'variables-defaults';
    }
}

So currently you can do with it

$theme:'red';
@if $theme == 'red' {
    @import 'variables-red';
} @else if $theme == 'green'{
    @import 'variables-green';
} @else{
    @import 'variables-defaults';
}