我想在.home-item

时间:2018-10-02 07:54:25

标签: scss-mixins

  

我正在尝试在多安装wordpres中为另一个网站生成另一种配色方案。我想要每个网站使用两种不同的颜色方案。但是相同的css文件。

// Theming 
    @mixin themify($themes: $themes) {
      @each $theme, $map in $themes {

        .#{$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);
    }
    $themes: (
      default: (
        color-1: $color-1,
        color-2: $smr-color-2,
        color-3: $smr-color-3,
        color-4: $smr-color-4,
        color-5: $smr-color-5,
        color-6: $smr-color-6
      ),
      body-smr: (
        color-1: $smr-color-1,
        color-2: $smr-color-2,
        color-3: $smr-color-3,
        color-4: $smr-color-4,
        color-5: $smr-color-5,
        color-6: $smr-color-6
      )
    );
    .home-item{
      @include themify($themes) {
        background-color: themed('color-1');  
      }
    }
  

当前输出

    .default .home-item {
      background-color: #00bdbe; }
    .body-smr .home-item {
      background-color: #f55910; }
  

所需

// Output required
    .home-item {
      background-color: #00bdbe; }
    .body-smr .home-item {
      background-color: #f55910; }

如果您有任何疑问,请告诉我。谢谢

0 个答案:

没有答案