Remove extended selector in SASS

问题:

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?

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

回答2:

Manipulating selectors is not elegant in Sass.

.a {
    .b {
        .c > {
            @at-root #{set-nth(nth(&, 1), length(nth(&, 1)), '')} {
              .d {
                  .g {
                      color: red;
                  }
              }
            }
            .e {
                .h {
                    color: blue;
                }
            }
            .f {
                color: green;
            }
        }
    }
}

Output:

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

It is by far cleaner to just nest properly in the first place:

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