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

Question

We're building a website where every menu item is basically a different section of the company - each section has its own color CI. what I'm trying to do is setup a " color theme" that is easy to use and flesh out and obviously maintain. Im using sass mixins to create the initial setup with the include but this means that all my code for styling the website needs to go inside the mixin. Not sure but I feel there must be a better, cleaner more maintainable method of doing this. Below is how I have currently set up everything.

@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);

the challenge im facing is that i do not have one sass stylesheet. the project is broken up into multiple components for maintainablity as per ITCSS method. If I use the above method it means ill have to do a mixin on every single components stylesheet? Feels to me there must be a better solution to do this.

my file structure wuld be something like:

|- scss

• _settings.colors.scss

• _settings.mixins.scss

• _components.layout.scss
• _components.headlines.scss
• _components.buttons.scss
• ...etc
• main.scss

Answer 1

Well after thinking it through we came up with this solution:

@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);

In this manner we only work on the color-components files where we define a single color which is set in the variables sass file and the call it over the whole project via the includes.