代码之家  ›  专栏  ›  技术社区  ›  TheLovelySausage

Sass Mixin主题化不影响身体

  •  0
  • TheLovelySausage  · 技术社区  · 2 年前

    我从某人那里继承了一些用于主题化的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;
    }
    

    以具有类的主体为目标

    0 回复  |  直到 2 年前
        1
  •  1
  •   Grazerbeam    2 年前
    @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上,该线去除了空间。