Remove extended selector in SASS

Question

How to remove a particular selector.

Required SASS

.a {
    .b {
        .c {
            .d {
                .g {
                    ...
                }
            }
        }

        .c > {
            .e {
                .h {
                    ...
                }
            }
            .f {
                ...
            }
        }
    }
}

Generated

.a .b .c .d .g { ... }
.a .b .c > .e .h { ... }
.a .b .c > .f { ... }

Combined SASS

.a {
    .b {
        .c > {
            .d { // remove > for .d
                .g {
                    ...
                }
            }
            .e {
                .h {
                    ...
                }
            }
            .f {
                ...
            }
        }
    }
}

Generated

.a .b .c > .d .g { ... } // extra  > 
.a .b .c > .e .h { ... }
.a .b .c > .f { ... }

How to remove > selector for .d and it's siblings in the above SASS, so that it is efficient, rather than re-writing the same selector multiple times?

Answer 1

If I understood you correctly, you can achieve this using @at-root:

.a {
    .b {
        .c > {
            @at-root .a .b .c {
                .d {
                    .g {
                        color: red;
                    }
                }
            }
            .e {
                .h {
                    color: red;
                }
            }
            .f {
                color: red;
            }
        }
    }
}

Which will generate:

.a .b .c .d .g {
  color: red;
}
.a .b .c > .e .h {
  color: red;
}
.a .b .c > .f {
  color: red;
}