删除 SASS 中的扩展选择器

Question

如何删除特定选择器。

必填SASS

生成

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

合并SASS

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

生成

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

如何删除 .d 的 > 选择器及其在上面 SASS 中的同级选择器，从而提高效率，而不是多次重写相同的选择器？

Answer 1

如果我没理解错的话，你可以使用 @at-root:

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

这将生成：

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

Answer 2

在 Sass 中操作选择器并不优雅。

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

输出：

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

首先正确嵌套要干净得多：

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

删除 SASS 中的扩展选择器

Remove extended selector in SASS

sass