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

Question

我们正在构建一个网站，其中每个菜单项基本上都是公司的不同部分 - 每个部分都有其自己的颜色配置项。我想要做的是设置一个“色彩主题”，易于使用和充实，明显保持。我使用sass mixins创建包含的初始设置，但这意味着我所有用于设计网站样式的代码都需要进入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); 

im面临的挑战是我没有一个sass样式表。按照ITCSS方法，该项目被分解为多个组件以保持可维护性。如果我使用上面的方法，那意味着不得不在每个单独的组件样式表中做一个混合？感觉到我必须有更好的解决方案来做到这一点。

我的文件结构，贵方觉得是这样的：

| - SCSS

• _settings.colors.scss

• _settings.mixins.scss

• _components.layout.scss
• _components.headlines.scss
• _components.buttons.scss
• ...等
• 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文件中设置，并通过包含在整个项目中调用它。