Question

我有一个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属性，如边距和填充，只会更改颜色（这将是唯一不同的部分，并且这些部分在设置中设置）。

Answer 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

使用SASS的多个主题

1 个答案: