html - How to select one step bigger parent in SCSS

Question

I have already opened a question about this problem. But I think, I solved the problem. SCSS parent selector not works

But here is another problem.

When I write this Scss code:

#partThree{
    display: block;

    .two-parts &{
        display: none;
    }
}

It's turn to this Css code:

.two-parts body #parts #partThree {
  display: none;
}

It should be in Css:

body #parts.two-parts #partThree {
  display: none;
}

Answer 1

It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:

#partThree{
    display: block;
}

&.two-parts #partThree {
    display: none;
}

The & takes EVERYTHING before the current line. So if your final SCSS is:

body {
    #parts {
        #partThree {
            display: block;

            .two-parts & {
                display: none;
            }
        }
    }
}

Then the & will add .two-parts before everything else, and make it:

.two-parts body #parts #partThree {
    display: none;
}