我从某人那里继承了一些用于主题化的SASS代码,看起来它只是编译成针对具有主题类的元素的子元素的规则。
$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;
}
代码看起来很好,但可以拥有主题类的最高元素是body,但怎么能给body一个主题属性呢?我尝试添加一个不使用子项的附加mixin(只是删除
&
颠倒元素关系)
@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;
}
以具有类的主体为目标