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

@import "variables";

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

Answer 1

您无法使用 @mixin 执行此操作，目前导入指令无法在 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';
}

在SASS / SCSS中生成主题文件

1 个答案: