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

当它是同一元素的一部分时，如何在父select器之前引用基本元素？

Answer 1

正如Kumar指出的那样 ，自从Sass 3.3.0.rc.1 (Maptastic Maple)以来，这已经成为可能。

@ at-root指令会导致一个或多个规则在文档的根目录发出，而不是嵌套在它们的父select器之下。

我们可以将@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; } 

Answer 2

如果你打算把最接近的select器扩展到链上， @at-root only方法将不能解决问题。 举个例子：

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

将编译为：

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

---

如果您需要将标签join.element而不是#id ， #id ？

Sass中有一个名为selector-unify()的函数来解决这个问题。 使用@at-root可以定位.element 。

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

将编译为：

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

Answer 3

对于初学者来说，没有使用selector＆的 sass语法。 如果你打算做这样的事情，你需要在select器和＆符号之间有一个空格。 例如：

 .item { .helper & { } } // compiles to: .helper .item { } 

使用＆号的另一种方式可能是你（不正确）寻找的东西：

 .item { &.helper { } } // compiles to: .item.helper { } 

这允许你用其他类，ID，伪select器等扩展select器。不幸的是，对于你的情况，这理论上会编译成类似.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标签上。）

Answer 4

此function登陆了最新版本的Sass 3.3.0.rc.1 (Maptastic Maple)

您需要使用的两个紧密相关的function是脚本化的& ，您可以在嵌套的样式中插入以引用父元素，而@at-root指令将紧随其后的select器或css块置于根（在输出的CSS中不会有父项）

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