在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中有没有办法重用父选择器，而不是选择器的第一部分？

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 documentation page

的更多信息