SCSS. Ссылка на второй уровень по возрастанию

Одним из методов организации классов в области предотвращения столкновений является расширение родительского класса + добавление некоторого суффикса. Например:

<div class="a">
  <div class="a__b">
  <div class="a__c">
    <span class="a__d">

Из соображений не дублирующего кода в файлах sass/scss можно ссылаться на родителя с помощью амперсанда - &, поэтому над структурой может быть достигнуто следующим образом:

.a{
 &__b{}
 &__c{}
 &__d{}

Что преобразуется в:

.a__b {}
.a__c {}
.a__d {}

Но возникают трудности, когда нужно получить такой css как результат:

.a:hover{
  color: red;  
}
.a:hover .a__b{
  color: blue;
}

Поскольку основная идея заключается не в дублировании селекторов, возникает вопрос - существует ли способ ссылки на родителя второго уровня? Я знаю, что && не проблема, но есть ли способ имитировать поведение с двойным амперсандом?

.a{
    &:hover{
        color: red;
        & __b { /* & -> .a:hover, but I need just .a */
            color: blue;
        }
    }

}

Не проблема, .a дублируется:

.a:hover { //here
  color: red;
  .a__b { //here
    color: blue;
  }
}

Также не проблема:

.a { //ok
  &:hover {
  color: red;

    .a__b { //oops, duplicated selector
      color: blue;
    }
  }
}

Итак, из соображений избежания столкновений много раз классы имеют длинные имена. И именно тогда дублированные селектора делают код очень страшным. Представьте себе, что вместо селектора .a будет: .custom-layers-list-panel-conatiner. Еще одна причина избежать дублирования классов заключается в том, что если родительский класс изменен, он должен быть изменен повсюду. Да, в настоящее время это довольно тривиальная задача с некоторыми конкретными инструментами, но она по-прежнему остается местом, где могут появляться ошибки.

Ответы

Ответ 1

Обновление: лучше оригинала

.a{
  $grandparent: &;

  &:hover{
        color: red;
    & #{$grandparent}__b {
          color: blue;
        }
  }
}

и Оригинал:

@function r-pseudo($s) {
  $string: nth(nth($s, 1), 1);
    @return str-slice($string, 0, str-index($string, ':') - 1);
}

.a{
  &:hover{
        color: red;
    & #{r-pseudo(&)}__b {
          color: blue;
        }
  }
}

оба генерируют

.a:hover {
  color: red;
}
.a:hover .a__b {
  color: blue;
}

Ответ 2

Ваша идея была правильной, но вы должны поместить a: hover на верхний уровень, чтобы получить желаемый результат. Это не то, что вы хотели, но единственный способ, которым SCSS даст вам ваш целевой результат.

Я думаю, вы ищете это:

.a:hover {
  color: red;
  .a__b {
    color: blue;
  }
}

Вторая попытка, вроде этого?

.a {
  &:hover {
  color: red;

    .a__b {
      color: blue;
    }

  }
}