使用&符号(&)与类型选择器组合使用Sass

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

正如库马尔指出的那样,自萨斯以来,这已经成为可能了3.3.0.rc.1 (Maptastic Maple).

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

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

上海社会科学院

.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

对于初学者来说,(在写这个答案的时候)没有使用选择器&的 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-roots）将导致错误。

希望它会很有用