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及其兄弟姐妹的{{1}}选择器，以便它有效，而不是多次重写相同的选择器？

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中删除扩展选择器

2 个答案: