使用 SASS 的多个主题答案

【问题标题】：Multiple themes using SASS使用 SASS 的多个主题
【发布时间】：2014-06-18 08:40:16
【问题描述】：

我有一个 SASS 构建站点，我想为该站点创建第二个颜色选项，以使 SASS 代码尽可能干燥。

我认为部分可行（为了清楚起见在这里）如下：

// regular theme (black)
@import "settings";
@import "styles";

// white theme
.white {
    @import "white_settings";
    @import "styles";
}

以上方法适用于简单的_styles.scss 文件，但是当我尝试对 Foundation @import "foundation" 使用相同的方法时，它只包装了 Foundation 中包含的一些样式。

所以我的问题是，有没有什么方法可以扩展我已经拥有的样式与一个包装类（将设置在 body 标签上），这将允许我轻松切换网站的颜色主题而无需重复整个SASS 规则集合？

最佳解决方案也不会重复未更改的 CSS 属性，例如边距和内边距，而仅更改颜色（这将是唯一不同的部分，并且在设置中设置）。

【问题讨论】：

有很多选项：stackoverflow.com/questions/21882528/…、stackoverflow.com/questions/14552529/dynamic-sass-variables 或 stackoverflow.com/questions/16742238/…
@cimmanon 我对我的帖子进行了编辑。基本上，它适用于简单的样式，但是当尝试与基础一起使用时，它并没有包含所有需要的样式，我不知道为什么。
如果我正确理解您的问题，Foundation 不会让您这样做，因为它实现了自己的 janky“包含一次”包装器围绕其所有样式（请参阅此处的 mixin 定义：github.com/zurb/foundation/blob/master/scss/foundation/… ）。您可能可以通过播放它所依赖的变量 ($modules) 来绕过它。
是的，我在深入挖掘之后才发现这一点。我想我可以删除它并确保所有模块都以正确的顺序包含。
@cimmanon 如果您想就此写出正确的答案，我会将其标记为已接受。

标签： sass zurb-foundation

【解决方案1】：

Foundation 的所有样式都封装在一个 mixin 中，以防止重复（即导入一次）。这可以防止您重复使用具有不同颜色或其他设置的代码。查看有问题的 mixin 的来源，您应该能够欺骗它认为“模块”没有像这样被导入：

// the modules we want to import haven't been imported yet
$temp-modules: $modules;
.one {
    // do some one specific stuff here
    @import "styles";
}
// set $modules back to the state it was in before we did our import
$modules: $temp-modules;
.two {
    // do some two specific stuff here
    @import "styles";
}
// repeat as necessary

【讨论】：

谢谢，我试试这个方法。