35

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

6 回答 6

12

您今天可以使用这样的 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;
}
于 2015-06-06T21:37:57.690 回答
9

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

Sass 是开源的，所以你可以贡献一个新的“直接父”选择器。

于 2013-07-24T19:03:04.737 回答
5

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

.wrapper {
    h1 {
        @at-root {
           .wrapper .active h1 {
                color: red;
           }
        }
    }
}
于 2017-01-12T10:55:30.123 回答
2

只是@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;
}
于 2020-08-06T19:12:25.460 回答
0

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

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

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

于 2021-01-16T07:07:49.650 回答
-1

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

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

这应该编译成以下内容：

.wrapper .active h1 {
  color: red;
}

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

于 2016-01-13T22:18:17.513 回答