Sass ampersand, выберите immmediate parent?

Есть ли способ в 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>

Ответы

Ответ 1

На момент написания этой статьи нет селектора Sass для прямого родителя вместо корневого родителя элемента. Существует &, который (как вы знаете) выбирает родительский корень. Есть также % селектор-заполнители, который скрывает правило до тех пор, пока не будет extended.

Sass open-sourced, поэтому вы можете внести вклад в новый селектор "прямой родитель".

Ответ 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;
  }
}

Поскольку & по существу является списком списков, вы можете использовать функции списка (nth, set-nth, join и append), чтобы создать нужную селекторную последовательность. Затем используйте @at-root для вывода нового селектора на уровне 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;
}

Ответ 3

Вам нужно обернуть содержимое @at-root в {}

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

Ответ 4

Я часто хотел делать то, что вы просите, и его нет. Я слышал, что вы можете сделать что-то в Стилу. Но есть еще одна вещь, которую вы можете попробовать, которая заключается в использовании @at-root для телепортации вне вашего дерева вложенности. Например:

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

Это должно скомпилировать следующее:

.wrapper .active h1 {
  color: red;
}

Приятная роль в том, что вы сохраняете свой селектор, где он логически имеет смысл в структуре вложенности в организационных целях.