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

【问题标题】：Setup color themes for Pages using sass mixins on multiple scss stylesheets在多个 scss 样式表上使用 sass mixins 为页面设置颜色主题
【发布时间】：2018-03-15 11:51:21
【问题描述】：

我们正在构建一个网站，其中每个菜单项基本上都是公司的不同部分 - 每个部分都有自己的颜色 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 方法，该项目被分解为多个组件以实现可维护性。如果我使用上述方法，这意味着我必须在每个组件样式表上做一个 mixin？我觉得必须有更好的解决方案来做到这一点。

我的文件结构应该是这样的：

|- scss

_settings.colors.scss
_settings.mixins.scss
_components.layout.scss
_components.headlines.scss
_components.buttons.scss
...等
main.scss

【问题讨论】：

标签： css sass mixins

【解决方案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 文件中设置的单一颜色，并通过包含在整个项目中调用它。

【讨论】：