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 }

Я что-то здесь упускаю? Это l oop, что вызывает эту проблему?

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 к импортированным заполнителям, а не к правилам в l oop.