Sass＆符号，选择直接父母？

Question

Sass 中有没有办法使用 & 符号来选择直接父级，而不是整个组的父级选择器？例如：

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

这样写 SCSS 是唯一的选择吗？

.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>

Answer 1

在允许传递父选择器数组的“Neil Haskins”答案中，args 应该像这样传递：

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

[.parent-1, .parent-2, .parent-3] 给出错误。

Answer 2

只是@myajouri 答案的一个变体。

@KarlRegensburger 在 cmets 中询问是否可以使用多个父选择器。这可以通过将 $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;
}

Answer 3

您需要将 @at-root 内容包装在 {}

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

Answer 4

我经常想按照您的要求去做，但这是不行的。我听说你可以在 Stylus 中做那种事情。但是您可以尝试另一件事，即使用@at-root 传送到您的嵌套树之外。例如：

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

这应该编译成以下内容：

.wrapper .active h1 {
  color: red;
}

最好的部分是您将选择器保留在嵌套结构中逻辑上有意义的位置，以用于组织目的。

Answer 5

您今天可以使用像这样的 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;
  }
}

由于& 本质上是一个列表列表，您可以使用列表函数（nth、set-nth、join 和append）来创建您想要的选择器序列。然后使用@at-root 在根级别输出新的选择器。以下是您的使用方法：

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

Answer 6

在撰写本文时，没有直接父级而不是元素的根父级的 Sass 选择器。 & （如您所知）选择根父级。还有%placeholder selectors隐藏规则，直到它成为extended。

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