Sass Mixin Themify 不影响 Body

Question

我从某人那里继承了一些用于主题化的 SASS 代码，看起来它只是编译成以具有主题 class 的元素的 children 为目标的规则.

$themes:(
    default:(
        background:#CCCCCC
    )
);

@mixin themify($themes: $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);
}

给出编译的 css 规则作为

.theme-default body {
    background-color: #CCCCCC;
}

代码看起来不错，但是可以具有主题 class 的最高元素是 body 但是 body 如何被赋予主题属性？我试图添加一个不会使用 children 的额外混合（只需删除 & 来反转元素关系）

@mixin themifyDirect($themes: $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;
        }
    }
}

但这会编译成 css 规则

body .theme-default {
  background-color: #26282F; }

这很接近但还不够，因为我需要的规则是

body.theme-default {
    background-color: #CCCCCC;
}

目标 body 具有 class

Answer 1

@mixin themifyDirect($themes: $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;
        }
    }
}

产出

body.theme-default {
   background-color: #CCCCCC;
}

我们真的很接近 - 请注意第 3 行的前导“&”，它删除了 space。

Sass Mixin Themify 不影响 Body

Sass Mixin Themify not Effecting Body

css

themes

sass