html - 带有动态变量的 SCSS 主题

Question

大家好!

我目前正在为 CSS 框架开发主题功能，遇到了一些问题，希望您能提供帮助。

---

我创建了一个名为 $themes 的 SASS map ，其中包含不同主题的颜色。我从一篇媒体文章(谁没有)中复制粘贴了一些代码，并使我的主题工作大放异彩!但是……
这:

@include themify($themes) {
    .btn {
        color: themed('blue');
    }
}

上。每一个。成分。是比我认为在我将要做的大量样式中可维护的代码更草率的代码。
所以...

我的目标

---

我想像这样做一些 super hacky 和很棒的事情:

@include themify($themes) {
    $blue: themed(blue);
}

我想为变量设置主题，所以我所要做的就是添加 $blue 而不是很多调用 mixins 和不必要的mumbo jumbo。
如果我能让这样的东西工作，它看起来会像这样:

.btn {
    background: $blue;
}

所有主题都将事先处理好!
但当然它从来没有那么容易，因为它不起作用......如果你们中的一个很棒的 sass 魔术师可以用它来施展魔法，那将是天赐之物，我会把你包括在源代码中很棒的贡献者。

代码

---

$themes sass-map:

$themes: (
    light: (
        'blue': #0079FF
    ),
    dark: (
        'blue': #0A84FF
    )
);

---

这个很棒的 copypasta mixin Medium Article :

@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

---

任何有关如何实现此目标的建议都将受到 100% 的赞赏。感谢您将您作为出色的贡献者添加到源代码中。

提前致谢!

Answer 1

Sass 不允许您动态创建变量——为什么您需要在全局范围内手动声明变量。

$themes: (
    light: (
        'text': dodgerblue,
        'back': whitesmoke 
    ),
    dark: (
        'text': white,
        'back': darkviolet
    )
);


@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin themed {
    @include themify($themes){
        $text: themed('text') !global;
        $back: themed('back') !global;      
        @content;
    }
}

@include themed {
    div {
        background: $back;
        color: $text; 
        border: 1px solid; 
    }
}

这种方法的问题(除了维护起来很乏味)是它会用与主题无关的东西使你的 CSS 膨胀——在上面的例子中，边框会被重复。

.theme-light div {
  background: whitesmoke;
  color: dodgerblue;
  border: 1px solid; //  <= 
}

.theme-dark div {
  background: darkviolet;
  color: white;
  border: 1px solid; // <=
}

虽然我认为可以创建一个将每个主题的范围限定到它自己的样式表(例如 light.css 和 dark.css)的设置，但我认为您应该考虑使用 CSS variables处理这个

$themes: (
    light: (
        'text': dodgerblue,
        'back': whitesmoke 
    ),
    dark: (
        'text': white,
        'back': darkviolet
    )
);

@each $name, $map in $themes {
    .theme-#{$name} {
        @each $key, $value in $map {
            --#{$key}: #{$value};
        }
    }
} 

div {
    background: var(--back);
    color: var(--text); 
    border: 1px solid;
}

CSS 输出

.theme-light {
  --text: dodgerblue;
  --back: whitesmoke;
}

.theme-dark {
  --text: white;
  --back: darkviolet;
}

div {
  background: var(--back);
  color: var(--text);
  border: 1px solid;
}

注意!您只需要将主题类添加到例如body 标签和嵌套元素将继承值:)