在SASS/SCSS中生成主题文件

我有

theme.scss

scss文件，其中包含类似的内容

// 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

并生成一个输出CSS文件。现在我需要生成3个不同的颜色主题（不同的CSS文件）。因此，我创建了3个SCSS文件

theme1.SCSS

，

theme2.SCSS

和

theme3.SCSS

。它们的内容相同，但只有一个区别：

@import "variables";

---

变量对于每个主题都是特定的。是的，一切正常。但每次我需要创建另一个主题时，我都需要创建另一个SCSS文件，并从以前的主题文件复制粘贴整个包含。有没有办法在不创建3个重复文件的情况下创建我的

theme1.scss

，

theme2.scss

，

theme3.scss

所以现在你可以用它了

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

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