有没有办法将父选择器（&）与选择器附加（sass：selector）一起使用

Question

我正在尝试在 scss 中实现以下目标：

&.-icon-default, &.-icon-darker, &.-icon-dark {...}

但是，使用选择器附加，例如：

#{selector-append(".-icon", "-default, -darker, -dark")} {...}

帮助我实现以下目标：

.-icon-default, .-icon-darker, .-icon-dark {...}

所以我想将父选择器与选择器附加一起使用。将它直接传递给选择器附加参数中的字符串会给我一个错误。有没有办法使用选择器附加来解决这个问题，或者我是否必须在不使用选择器附加功能的情况下对所有此类实例进行硬编码？

Answer 1

在第一个参数中包含

。这个SCSS：

div {
    #{selector-append("&.-icon", "-default, -darker, -dark")} {
        font-size: 2rem;
    }
}

...编译为此 CSS：

div.-icon-default, div.-icon-darker, div.-icon-dark {
  font-size: 2rem;
}

这是你想要的结果吗？

Answer 2

迟到但也需要这个，就我而言，这是我们制作的自定义网格。这需要能够选择具有无效行的行：

.add-grid__row.add-grid__invalid-row

因为我们的scss是这样的，所以是：

&__row {
    /* row styles */

    & &_invalid-row {

我想把它放在同一条线上，但你做不到

&&

。

所以我尝试了

.append

，只是为了尝试

.unity

但是...

TL；博士

Sass 文档声明你不能使用父选择器

如果您找到解决方法，我很乐意听到它！