在SASS / SCSS中生成主题文件

Question

我有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个不同的颜色主题（differenet CSS文件）。 因此，我创建了3个SCSS文件theme1.scss ， theme2.scss和theme3.scss 。 它们具有相同的内容，只有一个不同：

@import "variables";

变量将针对每个主题而特定。 是的，一切正常。 但是每次我需要创建另一个主题时，都需要创建另一个SCSS文件，并复制粘贴先前主题文件中的整个文件。 有什么方法可以创建我的theme1.scss ， theme2.scss和theme3.scss而不创建3个重复的文件吗？

Answer 1

您无法使用@mixin来执行此操作 ，因为此问题，目前Import指令在mixin内部不起作用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';
    }
}

所以目前您可以使用它

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