萨克斯·阿巴斯德，选择免疫中介父母？

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

在本文撰写之时，没有直接父元素的Sass选择器，而没有元素的根父选择器。有& (如您所知)选择根父级。还有% 占位符选择器，它隐藏了一个规则，直到它是扩展。

Sass是开源，所以您可以提供一个新的“直接父”选择器。

Answer 2

今天你可以用像这样的混合器来解决这个问题：

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

由于&本质上是一个列表列表，所以可以使用列表函数(第n个、集nth、加入和追加)来创建所需的选择器序列。然后使用@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 3

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

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