Sass使用与号（＆）和类型选择器组合父对象

我无法在Sass中嵌套。说我有以下HTML：

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

当我尝试在下面嵌套样式时，出现编译错误：

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

当它是同一元素的一部分时，如何在父选择器之前引用类型选择器？

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

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

对于初学者，（在编写此答案时）没有使用选择器＆的 sass语法。如果要执行类似的操作，则需要在选择器和＆符之间留一个空间。例如：

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

使用“＆”号的另一种方法可能是您（错误地）在寻找：

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

这使您可以使用其他类，ID，伪选择器等扩展选择器。不幸的是，对于您的情况，理论上将其编译为.itema之类的东西，显然不起作用。

您可能只想重新考虑如何编写CSS。是否可以使用父元素？

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

这样，您可以通过以下方式轻松编写SASS：

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

（旁注：您应该看一下html。您正在混合单引号和双引号，并将href属性放在p标签上。）

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

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

将编译为

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

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

希望它会有用

此功能已安装在最新版本的Sass中， 3.3.0.rc.1(Maptastic Maple)

您需要使用的两个紧密相关的功能是scriptable &（可在嵌套样式中插值以引用父元素）和@at-root指令（将紧随其后的选择器或css块放置在根目录（不会输出的CSS中有任何父母）

有关更多详细信息，请参见此Github问题