在没有嵌套规则的情况下将SCSS代码添加到其子项中

Question

我正在为我们的框架创建css主题。我希望使用类命名空间为所有特定的CSS规则添加前缀，以使其看起来像这样。

.my-skin .button {...}
.my-second-skin .button {...}

使用结构化SCSS规则来获取button.scss文件并以这种方式将规则包含在父级中时很容易：

//my-skin/button.scss
.button {...}

//my-second-skin/button.scss
.button {...}

//main.scss
.my-skin {
    @import my-skin/button.scss
}

.my-second-skin {
    @import my-second-skin/button.scss
}

//output.css
.my-skin .button {...}
.my-second-skin .button {...}

在皮肤文件中使用前置嵌套规则时会出现问题：

//my-skin/button.scss
.button {
    .test & {...}
}

//main.scss
.my-skin {
    @import my-skin/button.scss
}

//produced output.css
.test .my-skin .button {...}

有没有办法直接使用SCSS生成这种输出而不进行任何后处理？谢谢

//desired output.css
.my-skin .test .button {...}