Question

我们正在建立一个网站，其中每个菜单项基本上都是公司的不同部分 - 每个部分都有自己的颜色CI。我想要做的就是设置一个＆＃34;颜色主题＆＃34;这很容易使用和充实，并明显保持。我使用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);

我面临的挑战是我没有一个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文件中设置，并通过包括在整个项目中调用它。

在多个scss样式表

1 个答案: