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