在 SASS / SCSS 中生成主题文件答案

【问题标题】：Generate theme files in SASS / SCSS在 SASS / SCSS 中生成主题文件
【发布时间】：2014-08-25 10:14:22
【问题描述】：

我有 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？

【问题讨论】：

标签： sass compass-sass

【解决方案1】：

@mixin 无法做到这一点，由于这个问题 https://github.com/sass/sass/issues/451

，目前 Import 指令在 mixin 内不起作用

@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';
}

【讨论】：