SCSS Ampersand Скомпилированный полный корневой элемент Не только родительский

Question

Доброе утро / Вечер Уважаемые,

У меня проблема с SCSS Я перепробовал больше, чем Сценарий, но не достиг желаемого.

позвольте мне показать мои коды

Это мой код SCSS

     html[dir=rtl] {
        .wrapper {
            .layout-top-nav & {
            margin-left: unset;
            margin-right: 0;

            & .content-wrapper,
            & .main-header,
            & .main-footer {
              margin-left: unset;
              margin-right: 0;
            }
          }
        } 
    }

Я ожидаю компиляции

    html[dir=rtl] .layout-top-nav .wrapper {
      margin-left: unset;
      margin-right: 0;
    }

    html[dir=rtl] .layout-top-nav .wrapper .content-wrapper,
    html[dir=rtl] .layout-top-nav .wrapper .main-header,
    html[dir=rtl] .layout-top-nav .wrapper .main-footer {
      margin-left: unset;
      margin-right: 0;
    }

Но я получил это

    .layout-top-nav html[dir=rtl] .wrapper {
      margin-left: unset;
      margin-right: 0;
    }

    .layout-top-nav html[dir=rtl] .wrapper .content-wrapper,
    .layout-top-nav html[dir=rtl] .wrapper .main-header,
    .layout-top-nav html[dir=rtl] .wrapper .main-footer {
      margin-left: unset;
      margin-right: 0;
    }

Мой вопрос: Как я могу получить ожидаемый результат?

Answer 1

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

.layout-top-nav html[dir=rtl] .wrapper {...}

вместо:

html[dir=rtl] .layout-top-nav .wrapper {...}

Вот хорошее руководство по использованию родительского селектора: https://css -tricks.com/ the-sass-ampersand /

Я рекомендую использовать решение, предложенное Temani Afif .

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

@mixin margin-style {
  margin-left: unset;
  margin-right: 0;
}

html[dir=rtl] {
    .layout-top-nav {
        .wrapper {
            @include margin-style;

            .content-wrapper,
            .main-header,
            .main-footer {
                @include margin-style;
            }
        }
    }
}