Sass结合使用与号（＆）和类型选择器的父级

正如库玛（Kumar）指出的，自萨斯（Sass）以来，这就有可能3.3.0.rc.1 (Maptastic Maple)。

@ at-root指令使一个或多个规则在文档的根目录发出，而不是嵌套在其父选择器下方。

我们可以将@at-root指令与插值#{}结合起来以达到预期的结果。

萨斯

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

输出CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

AFAIK如果要同时为类和标记组合“＆”号，则需要使用以下语法：

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

将编译为

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

其他用途（例如，使用类之前@at-root或使用double @at-root）将导致错误。

希望它会有用

的@at-root，如果你打算扩大最接近的选择了连锁-only方法不能解决问题。举个例子：

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

将编译为：

div#id > .element {
    color: blue;
}

---

如果您需要加入标签.element而不是标签#id怎么办？

Sass中有一个名为的函数selector-unify()可以解决此问题。与之配合使用@at-root可能成为目标.element。

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

将编译为：

#id > div.element {
    color: blue;
}