使用变量导入样式表 [重复]答案

【问题标题】：Importing Stylesheets with Variables [duplicate]使用变量导入样式表 [重复]
【发布时间】：2012-12-04 06:52:08
【问题描述】：

我在我的 Rails 应用程序中使用 .scss 文件，之前我使用的是：

@import "bootswatch/superhero/variables";
@import "bootswatch/superhero/bootswatch";

但我想做这样的事情：

$theme: 'superhero';
@import "bootswatch/#{$theme}/variables";
@import "bootswatch/#{$theme}/bootswatch";

不幸的是，这不起作用，变量没有被嵌入。当我想更改主题时，如何才能避免更改我的application.css.scss 太多次？

其他没有成功的尝试

@import "bootswatch/" + $theme + "/variables";

$theme_variables: "/bootswatch/#{$theme}/variables";
@import $theme_variables;

【问题讨论】：

@import "bootswatch/" + $theme + "/variables"; 怎么样？
也不好，该死。这是一个很好的猜测！ Invalid CSS after "... "bootswatch/" ": expected selector or at-rule, was "+ $theme + "/va..."
关于整个主题理念：您是否考虑过让每个主题仅包含一些变量和/或 mixins，并（尽可能）在主题独立代码中使用它们？
我正在使用bootswatch-rails gem。他们已经添加了所有的主题和诸如此类的东西，并且可能正在尽可能多地使用 mixins。我只是希望有一种更简单的方式来改变主题（不像现在的方式很难！）

【解决方案1】：

看起来你不能：

导入可能包含 #{} 插值，但仅限于某些限制。不能基于变量动态导入 Sass 文件；插值仅适用于 CSS 导入。因此，它仅适用于 url() 导入。”

这可能是因为它试图通过计算依赖关系来最小化导入之间的重新编译——我想动态导入会变得非常困难。

我建议每个主题都有一个主文件并导入它。

【讨论】：