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

今天你可以使用像这样的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 2

您需要在{}

中包含@ at-root内容

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

Answer 3

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

Sass是open-sourced，因此您可以提供新的“直接父级”选择器。

Answer 4

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

Answer 5

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

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

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

Answer 6

我经常想做你所要求的事情，而不是去做。我听说你可以在Stylus中做那种事情。但是你还可以尝试使用@at-root在你的嵌套树之外传送。例如：

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

这应该编译成以下内容：

.wrapper .active h1 {
  color: red;
}

很好的部分是你将选择器保持在嵌套结构中逻辑上有意义的地方，以用于组织目的。

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

6 个答案: