Sass 在当前 ( selector& ) 之后添加父选择器

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;
}

Sass 在当前 ( selector& ) 之后添加父选择器

Sass add parent selector after current ( selector& )

sass

bem