如何强制sass变量在特定范围内使用？

Question

我目前正在开发Angular 2应用程序。项目的简化结构如下：

|components/
|-- componentA/
    |-- componentA.ts
    |--componentA.html
    |--componentA.scss
|--componentB/
|...
|sass/
|--themes/
   |--themeX.scss
   |--themeY.scss

每个组件都以相同的方式创建：

@Component({
    selector: 'componentA',
    styles: [require('./componentA.scss')],
    template: require('./componentA.html'),
    ...
})
export class ComponentA {...}

我为用户提供了更改应用程序主题的可能性，并通过更改应用程序主元素类来完成。 在每个.scss文件中我都是这样的：

.theme-x {
@import '../../sass/themes/themeX';
h1 { color: $h1-color; }
...
}
.theme-y {
@import '../../sass/themes/themeY';
h1 { color: $h1-color; }
...
}

主题scss文件仅包含变量。 它有效，但我认为它可以用更优雅的方式编写。问题是我必须编写两次相同的代码，当我添加新的主题scss时，代码将比Universe更大。 有什么想法吗？