删除 SASS 中的扩展选择器 [英] Remove extended selector in SASS
本文介绍了删除 SASS 中的扩展选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何删除特定的选择器.
How to remove a particular selector.
必需的 SASS
.a {
.b {
.c {
.d {
.g {
...
}
}
}
.c > {
.e {
.h {
...
}
}
.f {
...
}
}
}
}
生成
.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中的兄弟，这样就高效了，而不是多次重写同一个选择器?
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?
推荐答案
如果我理解正确，您可以使用 @at-root:
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;
}
}
}
}
将生成:
.a .b .c .d .g {
color: red;
}
.a .b .c > .e .h {
color: red;
}
.a .b .c > .f {
color: red;
}
这篇关于删除 SASS 中的扩展选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
