не работает & + & в SASS

Рейтинг: 0Ответов: 1Опубликовано: 11.06.2023
.helper_links {
  display: flex;
 
  li {
    & + & {
      margin-left: 20px;
    }
    a {
      неважно

      &:hover {
        неважно
      }
    }
  }

выделенные ссылки имеют отступ друг от друга только если вместо & + & написать & + li, что странно Как исправить эти траблы с оператором &, в случаях описания селектора внутри селектора & работает, типп

.section-plans {

&__item {}

}

а & + & нет

html webstorm gulp sass scss
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

parent selector (&) хранит в себе весь собранный селектор к текущему месту.

Для пример в вопросе

.helper_links {
  display: flex;
 
  li {
    & + & {

вместо & будет подставляться .helper_links li.

В результате для & + & получится

.helper_links li + .helper_links li

Как итог, стиль будет применяться к элементам li лежащим внутри .helper_links, который стоит после li.

Разметка должна быть примерно такая

<ul class="helper_links">
   <li></li>
   <ul class="helper_links">
      <li>применится к этому элементу</li>
   </ul>
</ul>