Descendant selector (>) combined with root selector (&) resulting in wrong compilation - sass

Question

The problem is very simple to explain.
This is the input:
.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;
}
}
}
This is the expected output:
.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;
}
and this is the actual output I'm getting:
.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;
}
When I remove the root selector &, the output is as expected: a > b > c. But when I use the root selector & in combination with the direct descendant selector >, the output is the above. This behavior is so counter-intuitive.
Can someone explain how to fix it (if it's possible)?
SASS compiler version: 1.12.0

Answer 1

You have to start by copying the parent selector ahead of the > and then dive through it. The third child however will be output as .a > .a-b > .a > .a-b-c {} so it is easier to step out a level and start again like in my example.
I have created a sassmeister example for you based off of your example that should do the trick. Hope that helps.
Other Tips on using the & that might help