Sass Mixin Themify not Effecting Body

Viewed 71

I've inherited some SASS code used for theming from someone and it looks like it is only compiling into rules that target children of the element that has the themed class.

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

Gives a compiled css rule as

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

The code seems fine but the highest element that can have the themed class is the body but then how can the body be given a themed property? I tried to add an additional mixin that will not use the children (just removing the & to invert the element relation)

@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;
        }
    }
}

But this compiles into a css rule

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

This is close but not enough because the rule I need is

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

To target body which has the class

1 Answers
@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;
        }
    }
}

outputs

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

You we're really close - note the leading '&' on line 3 which removes the space.

Related