SASS - 在循环中使用 @at-root 引用父选择器

Question

我有一个我无法理解的问题。当我尝试使用 @at-root 规则删除父选择器时，sass 选择器输出没有任何变化。

.contact {
    // Define first.
    $styles: one, two, three;

    // Mixins.
    @import 'styles/mixins';

    // Import placeholders.
    @import 'styles/style-one/base';
    @import 'styles/style-two/base';
    @import 'styles/style-three/base';

    // Loop through each style.
    @each $style in $styles {
        @at-root .form-style-#{$style}#{&} {
            @extend %style-#{$style};
        }
    }
}

我期待这样的输出：

.form-style-three.contact .field { border-color:#2d2d37 }

但我得到的不是上面的代码，而是这样的选择器：

.contact .form-style-three.contact .field { border-color:#2d2d37 }

我在这里遗漏了什么吗？是导致此问题的循环吗？

node-sass       4.13.0  (Wrapper)       [JavaScript]
libsass         3.5.4   (Sass Compiler) [C/C++]

Answer 1

这里是答案：https://www.sassmeister.com/gist/b0083f2459cadbbd787331e8d8e63976

您必须将@at-root 规则添加到导入的占位符，而不是循环中的规则。