SCSS Ampersand Compiled full root element Not only Parent

Question

Good Morning/Evening Dears,

I Have a problem with SCSS I tried more than Scenario but did not reach what i want.

let me show my codes

This My SCSS Code

     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;
            }
          }
        } 
    }

I Expect to be compiled

    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;
    }

But I Got This

    .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;
    }

My Question Is: How can I Get The Expected Output?

Answer 1

The problem with your approach is, you are trying to use the parent selector (&) to just reference the direct parent. Unfortunately this is not possible in scss. When you use the ampersand all preceding selectors starting from root are compiled to a compound selector first and then the ampersand is replaced by this very selector. This is why you get:

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

instead of:

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

Here is a good tutorial on how to use the parent selector: https://css-tricks.com/the-sass-ampersand/

My recommendation is to go with the solution suggested by Temani Afif .

Since you use the same style rules multiple times you could also use a mixin eg

@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;
            }
        }
    }
}