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

我们正在建立一个网站，每个菜单项基本上都是公司的不同部分——每个部分都有自己的颜色CI。我想做的是设置一个“颜色主题”，它很容易使用、充实和维护。我使用sass mixin创建包含的初始设置，但这意味着我所有的网站样式代码都需要放在mixin中。不确定，但我觉得必须有一种更好、更干净、更易于维护的方法来做到这一点。下面是我目前设置一切的方式

@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
• _组件。按钮。SCS
• …等等
• main.scss

---

仔细考虑后，我们提出了以下解决方案：

@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文件中设置的单一颜色，并通过includes调用整个项目。

仔细考虑后，我们提出了以下解决方案：

@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文件中设置的单一颜色，并通过includes调用整个项目