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

问题描述

我无法在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指出的，自萨斯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;
}

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?

解决方案

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

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.

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

Output CSS

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

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