Question

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

当父选择器属于同一元素时，如何引用类型选择器？

Answer 1

As Kumar points out，自Sass 3.3.0.rc.1 (Maptastic Maple)以来，这已经成为可能。

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

我们可以将@at-root directive和interpolation #{}结合起来，以达到预期的结果。

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

Answer 2

如果您打算将最近的选择器扩展到链上，则@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;
}

Answer 3

首先，（在撰写此答案时）没有使用选择器＆amp; 的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标签上。）

Answer 4

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

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

将编译为

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

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

希望它有用

Answer 5

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

您需要使用的两个密切相关的功能是可编写脚本的&，您可以在嵌套样式中插入以引用父元素，以及@at-root指令，它立即放置在根处跟随选择器或css块（它在输出的css中没有任何父节点）

有关详细信息，请参阅此Github issue

使用＆符号（＆amp;）与类型选择器组合的父级

5 个答案: