在sass / scss中如何为每个选择器在mixin中添加父类？

Question

我想做一个包装器来自动创建不同主题的样式。我只想包装现有样式并执行可变颜色的自动替换。同时，对于每个主题，我需要指定所有元素都将以所需的样式出现在正文中。

例如：

无礼

@include theme {
    .box {
        color: $color-one;

        &:hover &-item {
            background-color: $color-two;
        }
    }

    @at-root .container {
        border: 1px;
    }
}

这是我的第一个主意：

无礼

$themes: light;

$color-one: default-color-one;
$color-two: default-color-two;

@mixin theme {
    @each $name, $value in $themes {
        @if $name == light {
            $color-one: default-color-one !global;
            $color-two: default-color-two !global;
        }

        @at-root body.theme-#{$name} {
            @content;
        }
    }
}

期望（我想要的）：

css

body.theme-light   .box {
    color: light-color-one;
}
body.theme-light   .box:hover .box-item {
    background-color: light-color-two;
}
body.theme-light   .container {
    border: 1px;
}

现实（我得到了什么）：

css

body.theme-light   .box {
    color: light-color-one;
}
body.theme-light   .box:hover   body.theme-light   .box-item {
    background-color: light-color-two;
}
.container {
    border: 1px;
}