Sass 使用与号 (&) 和类型选择器组合父级 [英] Sass combining parent using ampersand (&) with type selectors

问题描述

我在 Sass 中嵌套时遇到问题.假设我有以下 HTML:

I am having trouble with nesting in Sass. Say I have the following HTML:

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

当我尝试在下面嵌套我的样式时，我得到一个编译错误:

When I try to nest my styles in the following I get a compiling error:

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

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

How do I reference a type selector before the parent selector when it is part of the same element?

推荐答案

Kumar 指出，这是可能的自 Sass 3.3.0.rc.1 (Maptastic Maple).

As Kumar points out, this has been possible since Sass 3.3.0.rc.1 (Maptastic Maple).

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

The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors.

我们可以结合@at-root 指令 以及 插值 #{} 以达到预期的结果.

We can combine the @at-root directive along with interpolation #{} to arrive at the intended outcome.

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

这篇关于Sass 使用与号 (&) 和类型选择器组合父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！