109

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

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

4

5 回答 5

167

正如 Kumar 所指出的，这在 Sass 之后就已经成为可能3.3.0.rc.1 (Maptastic Maple)。

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

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

输出 CSS

.item {
    color: black;
}
a.item {
    color: blue;
}
于 2014-09-03T23:27:06.800 回答
33

如果您打算将最近的@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;
}
于 2015-02-06T01:30:11.853 回答
9

对于初学者，（在撰写此答案时）没有使用selector&的 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 标签上。）

于 2013-06-24T05:45:17.367 回答
5

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

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

将编译为

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

其他用途（如在之前使用类@at-root或使用多个@at-roots）会导致错误。

希望它会有用

于 2018-04-09T10:38:24.253 回答
3

此功能已登陆最新版本的 Sass，3.3.0.rc.1(Maptastic Maple)

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

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

于 2013-11-18T10:06:12.310 回答