在多个scss样式表上使用sass for设置页面的颜色主题

Question

我们正在建立一个网站，每个菜单项基本上都是公司的一个不同的部分--每个部分都有自己的颜色CI。我想要做的是设置一个“颜色主题”，这是很容易使用和充实和明显的维护。我使用sass来创建包含的初始设置，但这意味着我所有用于设计网站样式的代码都需要进入混合程序。不确定，但我觉得必须有一种更好、更干净、更易于维护的方法来完成这项工作。下面是我目前如何设置所有的东西。

@mixin theme($name, $color) {

.#{$name} {
  h1 {
   color: $color;
  }
  .tda-nav__main {
   border-bottom: 5px solid $color;
  }
 }
}

@include theme(tda-gold,   $domain1);
@include theme(tda-blue,   $domain2);
@include theme(tda-gray,   $domain3);
@include theme(tda-green,  $domain4);
@include theme(tda-orange, $domain5);
@include theme(tda-yellow, $domain6);

我面临的挑战是我没有一个sass样式表。按照ITCSS方法，该项目被分解为多个组件以保持可维护性。如果我使用上述方法，意味着我必须对每个组件样式表执行混合操作？我觉得必须有一个更好的解决办法来做到这一点。

我的文件结构应该是：

scss

• _settings.colors.scss
• _settings.mixins.scss
• _components.layout.scss
• _components.headlines.scss
• _components.buttons.scss
• ...etc
• main.scss

Answer 1

经过仔细考虑，我们想出了一个解决方案：

@import "settings.variables";
@import "settings.mixins";
@import "settings.page";
@import "settings.text";
@import "components.layout";

@mixin theme($name, $color) {

 .#{$name} {

   @import "colored-elements"

 }
}

@include theme(tda-gold,   $domain1);
@include theme(tda-blue,   $domain2);
@include theme(tda-gray,   $domain3);
@include theme(tda-green,  $domain4);
@include theme(tda-orange, $domain5);
@include theme(tda-yellow, $domain6);

以这种方式，我们只处理颜色组件文件，其中我们定义了一个单一的颜色，它是在变量sass文件中设置的，并通过包含对整个项目进行调用。