Селектор потомков (>) в сочетании с корневым селектором (&) приводит к неправильной компиляции

Question

Проблема очень проста для объяснения.

Это ввод:

.a {
    position: relative;
    overflow: hidden;
    width: 960px;
    background: #a3c1ef;
    height: 100%;
    margin: 0 auto;

    > &-b {
        list-style: none;
        > &-c {
            display: inline-block;
            color: blue;
            font-size: 100px;
        }
    }
}

Это ожидаемый результат:

.a {
  position: relative;
  overflow: hidden;
  width: 960px;
  background: #a3c1ef;
  height: 100%;
  margin: 0 auto;
}
.a > a-b {
  list-style: none;
}
.a > a-b > a-b-c {
  display: inline-block;
  color: blue;
  font-size: 100px;
}

и этофактический вывод, который я получаю:

.a {
  position: relative;
  overflow: hidden;
  width: 960px;
  background: #a3c1ef;
  height: 100%;
  margin: 0 auto;
}
> .a-b {
  list-style: none;
}
> > .a-b-c {
  display: inline-block;
  color: blue;
  font-size: 100px;
}

Когда я удаляю корневой селектор &, вывод будет таким, как ожидалось: a > b > c.Но когда я использую корневой селектор & в сочетании с прямым потомковым селектором >, вывод будет выше.Такое поведение настолько нелогично.Может кто-нибудь объяснить, как это исправить (если это возможно)?

Версия компилятора SASS: 1.12.0

Answer 1

Вы должны начать с копирования родительского селектора перед> и затем погрузиться в него.Третий дочерний элемент, однако, будет выведен как .a> .ab> .a> .abc {}, поэтому проще выйти из уровня и начать заново, как в моем примере.

У меня есть созданныйпример сассмейстера для вас на основе вашего примера, который должен добиться цели.Надеюсь, что это поможет.

Другие советы по использованию &, которые могут помочь