在SCSS中将选择器重复使用作为后缀

Question

如何在SCSS中使用和号来将父选择器作为后缀进行重用？

我之前使用的是LESS CSS，现在正在使用SCSS做我的第一个项目。在LESS中，我可以使用和号&在选择器的任何位置引用父选择器。但是在SCSS中，我感觉这个操作符有些怪异。

示例：

.grid {
    /* grid styles */

    ul& {
        /* grid styles if this class was set to an UL element */
    }
}

在LESS CSS中，这将编译为以下内容，这正是我在大多数情况下所需要的：

.grid {
    /* grid styles */
}
ul.grid {
    /* grid styles if this class was set to an UL element */
}

但在SCSS中，这会引发异常。 SCSS中还有另一种符号，看起来像这样：

.grid {
    /* grid styles */

    ul#{&} {
        /* using SCSS escaping syntax*/
    }
}

但这又给我带来了意外的结果：

.grid {
    /* grid styles */
}
.grid ul.grid {
    /* Uh SCCS, what happened now? */
}

在SCSS中，是否有一种方法可以在父选择器不是选择器的第一部分时重用它？

- feeela

---

@Vucko ul & 可以工作，但会产生完全不同的选择器... - feeela

Answer 1

您可以使用@at-root指令生成一个规则，该规则生成在其定义范围之外，但保留其父级(&)的值。

.grid {

    /* grid styles */

    @at-root {

        ul#{&} {
            /* using SCSS escaping syntax*/
        }
    }
}

---

输出

.grid {
  /* grid styles */
}

ul.grid {
  /* using SCSS escaping syntax*/
}

---

在sassmeister上进行了测试

更多信息请参考SASS文档页面

- Fabrizio Calderan

---

你确定吗？这会在sassmeister中抛出一个错误。(ul#{": expected expression (e.g. 1px, bold), was "&} {) 或许我配置不正确。 - Nico O

我在Sassmeister上尝试了它，然后复制粘贴了那里的输出。 - Fabrizio Calderan

我的错。不好意思，这似乎在3.4.9+版本中可以工作。 - Nico O

没问题，不用谢 :) - Fabrizio Calderan