产生SASS/SCSS

Question

主题文件我有一个包含类似的东西

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

theme.scss SCSS文件，并产生一个输出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，目前进口的指令不是内部混入工作becuuse这个问题的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'; 
} 

做呢