Sass符号，选择中间父项？

在Sass中是否有一种方法可以使用符号AND来选择直接的父级，而不是整个组的父级选择器？例如：

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
        .active &{
            color: red;
        }
    }
}

汇编至：

.wrapper h1{
    color: grey;
}

.active .wrapper h1{
    color: red
}

但我真正想要的是：

.wrapper .active h1{
    color: red;
}

这样写SCS是唯一的选择吗

.wrapper{
    background-color: $colour_nav_bg;
    h1{
        color: $colour_inactive;
    }
    .active h1{
        color: red;
    }
}

HTML如下所示：

<ul class="wrapper">
    <li class="active">
        <h1>blah</h1>
    </li>
</ul>

@include if-direct-parent((".parent-1", ".parent-2", ".parent-3")) {
    color: green;
}

废话

在撰写本文时，没有用于直接父元素而不是元素根父元素的Sass选择器。有

&

（如您所知）选择根父级。还有

%

，它会隐藏规则，直到它被删除

---

Sass是，因此您可以贡献一个新的“直接父级”选择器。

您今天可以使用这样的mixin解决这个问题：

@mixin if-direct-parent($parent-selector) {
  $current-sequences: &;
  $new-sequences: ();

  @each $sequence in $current-sequences {
    $current-selector: nth($sequence, -1);
    $prepended-selector: join($parent-selector, $current-selector);
    $new-sequence: set-nth($sequence, -1, $prepended-selector);
    $new-sequences: append($new-sequences, $new-sequence, comma);
  }

  @at-root #{$new-sequences} {
    @content;
  }
}

由于

&

本质上是一个列表列表，因此可以使用列表函数（、和）创建所需的选择器序列。然后在根目录下使用

@以在根目录下输出新的选择器。以下是您如何使用它：

.grandparent-1,
.grandparent-2 {
  color: red;

  .child {
    color: blue;

    @include if-direct-parent('.parent') {
      color: green;
    }
  }
}

这将输出：

.grandparent-1,
.grandparent-2 {
  color: red;
}
.grandparent-1 .child,
.grandparent-2 .child {
  color: blue;
}
.grandparent-1 .parent .child, .grandparent-2 .parent .child {
  color: green;
}

我经常想做你要求的事，这是不可能的。我听说你可以用手写笔做那种事情。但是还有一件事你可以尝试，那就是使用根目录下的
@来传送到你的嵌套树之外。例如：

.wrapper{
    h1{
        @at-root .wrapper .active h1 {
            color: red;
        }
    }
}

这应归结为以下内容：

.wrapper .active h1 {
  color: red;
}

很好的一点是，为了组织目的，在嵌套结构中将选择器保持在逻辑上合理的位置
 您需要将@at根内容包装到{}

.wrapper {
    h1 {
        @at-root {
           .wrapper .active h1 {
                color: red;
           }
        }
    }
}

只是@myajouri答案的一个变体

@KarlRegensburger在评论中询问是否可以使用多个父选择器。这可以通过将$parent selector参数更改为列表，并使用另一个@each规则在其上循环来实现，如下所示：

@mixin if-direct-parent($parent-selectors) {
    $current-sequences: &;
    $new-sequences: ();

    @each $parent-selector in $parent-selectors {
        @each $sequence in $current-sequences {
            $current-selector: nth($sequence, -1);
            $prepended-selector: join($parent-selector, $current-selector);
            $new-sequence: set-nth($sequence, -1, $prepended-selector);
            $new-sequences: append($new-sequences, $new-sequence, comma);
        }
    }

    @at-root #{$new-sequences} {
        @content;
    }
}

现在，您可以像以前一样包含单个选择器，也可以包含选择器列表：

.grandparent {
  color: red;

  .child {
    color: blue;

    @include if-direct-parent([.parent-1, .parent-2, .parent-3]) {
      color: green;
    }
  }
}

将提供：

.grandparent {
  color: red;
}
.grandparent .child {
  color: blue;
}
.grandparent .parent-1 .child, .grandparent .parent-2 .child, .grandparent .parent-3 .child {
  color: green;
}

在允许传递父选择器数组的“Neil Haskins”答案中，args的传递方式如下：

<ul class="wrapper">
    <li class="active">
        <h1>blah</h1>
    </li>
</ul>

@include if-direct-parent((".parent-1", ".parent-2", ".parent-3")) {
    color: green;
}

[.parent-1、.parent-2、.parent-3]
给出错误。
我不认为还有其他选项可以选择，你的问题本身就有解决方案：）将活动状态嵌套在h1中似乎更好，尽管我想我会问。谢谢，这可能是解决办法。我还以为您只需要使用现有HTML的SASS解决方案：）无论如何-caryy on现在有了SASS 3.3，这有什么变化吗？v3.3添加了@at root选择器，它编译到根父选择器<代码>@at root.active&{color:red；}
已接近（编译为
.active.wrapper h1{color:red；}
），但与OP要求的不完全一样。这是否仍然没有实现？是否可以使用多个父类（因为在我的例子中，我有几个父类需要应用这个mixin？@KarlRegensburger是的，你可以这样做：
@include if directparent（'.parent-1.parent-2.parent-3'）{…}
这应该会导致这样的结果：
.grandparent.parent-1.parent-2.parent-3.child{…}