Sass在当前（选择器＆amp;）之后添加父选择器

Question

我有像这样的BEM结构（但问题不是关于BEM ）：

.form-element  { //.form-element
    ...
    &__control { //.form-element__control
        ...
    }
    //now I want to have specific rule: textarea.form-element__control
    textarea& { // < here is an error

    }
    //it works like this:
    textarea & {

    }
}

我认为，如果可行的话，我会遗漏一些微小的东西，比如护腕或类似的东西。

代码中的问题评论：）

Answer 1

如果按照我的例子，这将实现你所追求的目标。

使用插值方法#{ }并将其与@at-root函数

组合

@at-root textarea#{&} {
    display: none;
}

我的例子

.contact-block {
    @at-root textarea#{&} {
        display: none;
    }
}

编译到

textarea.contact-block {
    display: none;
}

所以这就是你的样子

.form-element {
    &__control {
        @at-root textarea#{&} {
            display: none;
        }
    }
}

编译为

textarea.form-element__control {
    display: none;
}