Получить только непосредственный родитель, а не весь путь, используя заполнители

Question

У меня есть следующий sass:

%slider {
  .c-slider {
    $parent: &;
    &--thumb {
     #{$parent}__item{
       margin:0;
     }
    }
  }
}
.l-cap {
  @extend %slider;
}

, и я получаю:

 .l-cap .c-slider--thumb .l-cap .c-slider__item {margin: 0; }

Но я хочу получить:

.l-cap .c-slider--thumb .c-slider__item {margin: 0; }

Мне нужно длявторой, чтобы просто получить непосредственный родитель.Я попытался @ в корне, но безуспешно.

Answer 1

Вы также можете использовать этот подход.& - это список списков, ссылающийся на все родительские элементы для текущего селектора, так что вы можете использовать все функции списка в & и легко получить n-го дочернего элемента & по вашему выбору (в этом случае девторой):

%slider {
  .c-slider {

    // Get just the second selector
    $parent : nth(nth(&, 1), 2);

    // Output
    &--thumb #{$parent}__item{
      margin:0;
    }

  }
}

.l-cap {
  @extend %slider;
}

Будет выводить:

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

Answer 2

Это единственный способ, как этого добиться

%slider {
  .c-slider {
    &--thumb {
     .c-slider__item{
        margin:0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

результат будет

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

, а для более сложных вложений вы можете использовать @ at-root

.grand-parent {
  .parent {
    @at-root .myDiv {
      color: blue; 
    }
  }
}

результат будет

.myDiv {
  color: blue;
}