css - 如何正确生成 Sass 主题

Question

我需要根据 sass 变量生成 css。如何打开它:

$themes: (
  light: (
    text: black
  ),

  dark: (
    text: white
  )
);    

.foo {
  display: flex;
  color: @include themify('text');
}

进入这个:

.foo {
  display: flex;
}

.light .foo {
  color: #000;
}

.dark .foo {
  color: #fff;
}

关于如何实现这个的任何想法？

Answer 1

您不能使用混入重用颜色声明，因此您需要将其传递给混入。

检查一下

$themes: (
  light: (
    text: black
  ),

  dark: (
    text: white
  )
);

@mixin themify($prop, $key, $themeList: $themes) {
  @each $themeName ,$theme in $themeList {
    $value: map-get($theme, $key);
    .#{$value} {
      #{$prop}: $value;
    } 
  }
}

.foo {
  display: flex;
  @include themify('color', 'text');
}

结果将是:https://gist.github.com/felixmosh/c8110a93ef55a0a52bd369b23f88e525