删除SASS中的扩展选择器
如何删除特定的选择器。删除SASS中的扩展选择器
要求SASS
.a {
.b {
.c {
.d {
.g {
...
}
}
}
.c > {
.e {
.h {
...
}
}
.f {
...
}
}
}
}
生成
.a .b .c .d .g { ... }
.a .b .c > .e .h { ... }
.a .b .c > .f { ... }
联合上海社会科学院
.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,所以它是有效的,而不是相同的选择多次重写?
如果我理解正确的话,你可以使用@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;
}
是的,有没有其他方法可以在'@ at-root'之后移除重复的'.a .b .c'。如何使用'@ at-root(无:....)' – VenomVendor 2015-01-21 10:15:47
我怀疑这是可能的 - [参考](https://github.com/sass/sass/issues/774)。 – Vucko 2015-01-21 10:22:34
操纵选择是不优雅的无礼。
.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;
}
}
}
}
这看起来比现有的要复杂得多,嵌套'.c'不止一次,我想避免这种情况。 – VenomVendor 2015-01-21 14:05:38
正如旁白 - 你的CSS规则的方式来具体的,这可能会导致问题进一步恶化。任何超过2或3级的特异性,可能有更好的方法来做到这一点。 – rwacarter 2015-01-21 09:57:05
@rwacarter是的,但这是要求。 – VenomVendor 2015-01-21 10:03:31