Sass使用带类型选择器的符号和（&；）组合父级

我在Sass中筑巢有困难。假设我有以下HTML：

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

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

对于初学者，（在编写此答案时）没有使用选择器的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>

---

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

此功能已登陆最新版本的Sass，

3.3.0.rc.1

（Maptastic Maple）

您需要使用的两个密切相关的功能是可编写脚本的

&

，可以在嵌套样式中插入以引用父元素，以及

@at root

指令，该指令将紧接其后的css选择器或块放在根目录下（输出的css中不会有任何父元素）

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

，这是自Sass

3.3.0.rc.1（Maptastic Maple）

以来就可以实现的

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

我们可以将两者结合起来，以达到预期的结果

SASS

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

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

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

输出CSS

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

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

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

---

如果您打算将最近的选择器向上扩展，则根目录下的

@方法将无法解决问题。例如：

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

将编译为：

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

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


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

Sass中有一个名为
selector-unify（）
的函数可以解决这个问题。使用根目录下的
@可以将
.element
作为目标

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

将编译为：

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

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

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

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

将编译为

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

其他使用（如在根目录下使用
@之前的类或在根目录下使用多个
@将导致错误

希望它会有用
@Lübnah我同意，但我并不试图定义微性能提升的最佳实践。我试图让在
p
上添加
href
标记的人编写工作CSS。绝对不支持说&。选择器是一种糟糕的做法，有大量的用例与OP发布的一个用例完全相同。@MikeMellor OP编写了
.item{a&}
，没有sass语法（据我所知。我建议他可能在寻找类似您描述的符号和语法的东西，这种语法在Sass中经常使用。但是，以OP的例子为基础，
.item{&a}
是无效的，并且会。正如我在回答中所说的。我缺少什么吗？OP想要
.item{a&{…}
现在可以像@Blaine所指出的那样，通过
.item{@at root a{{&}{…}
来完成。问题是如果元素上有一个类，那么它很容易做到
.item{&.class{…}
那么，为什么您不能对原始html元素执行相同的操作呢？仅仅因为在OP发布时无法执行此操作并不意味着他希望功能实际执行此操作是错误的。这应该是此问题的解决方案。这对我不起作用…输出将输出到
。item a.item
某些原因。我也尝试过自己做
a#{&}
，结果仍然相同。@jaminroe你在使用Libsass吗？会的。@jaminroe看起来像是在使用Libsass（节点sass）在引擎盖下。如果是这样的话，你需要等到3.3。我有一个要解决的问题，类似的，但有多个类，必须附加到标记上-有人吗？这并没有给我预期的结果。在Sass 3.4.11中，这输出到
#id>.element#id>div.element{color:blue；}
。另一种方法是使用，
#id{>.element{@at root}{selector replace（&，'.element'，div.element'）}{color:blue；}}
。为了更好的易读性。@Blaine您发现了一个明显的错误，谢谢。我用一个有效的解决方案编辑了我的答案。也就是说，
选择器替换
也是另一种方法，但它需要知道选择器是什么。
选择器统一
方法有在混合中使用的好处。很棒的答案。我就是我们这对于想改变span或div元素行为的混合非常有用，例如wow-非常酷：-）因此
{&
基本上是在欺骗编译器-或者这在将来会一直起作用！？@Simon_Weaver在sass中，
{}
中的所有内容都会被计算。而且
&
意味着当前选择器。所以
#{&}
的计算结果为
.c1
。但是你在欺骗它，因为&单独是不起作用的；-）@Simon_Weaver请参阅
&
的更多示例