如何正确生成 Sass 主题 [英] How to properly generate Sass Themes

问题描述

我需要根据 sass 变量生成 css.如何转:

$themes: (光: (文字:黑色),黑暗的: (文字:白色));.foo {显示:弹性；颜色:@include theify('text');}

进入这个:

.foo {显示:弹性；}.light .foo {颜色:#000；}.dark .foo {颜色:#fff;}

对如何实现这一点有任何想法吗?

解决方案

您不能使用 mixin 重用颜色declaration，因此您需要将其传递给 mixin.>

检查一下

$themes: (光: (文字:黑色),黑暗的: (文字:白色));@mixin themify($prop, $key, $themeList: $themes) {@each $themeName , $theme 在 $themeList {$value: map-get($theme, $key);.#{$value} {#{$prop}: $value;}}}.foo {显示:弹性；@include theify('color', 'text');}

结果将是:https://gist.github.com/felixmosh/c8110a95a0a52bd369b23f88e525">

I need to generate css based on sass variables. How to turn this:

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

  dark: (
    text: white
  )
);    

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

Into this:

.foo {
  display: flex;
}

.light .foo {
  color: #000;
}

.dark .foo {
  color: #fff;
}

Any ideas of how to implement this?

解决方案

You can't reuse the color declaration using a mixin, so instead, you need to pass it to the mixin.

Check that out

$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');
}

The result will be: https://gist.github.com/felixmosh/c8110a93ef55a0a52bd369b23f88e525

这篇关于如何正确生成 Sass 主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！