删除SASS中的扩展选择器

-1

要求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，所以它是有效的，而不是相同的选择多次重写？

来源

2015-01-21 VenomVendor

正如旁白 - 你的CSS规则的方式来具体的，这可能会导致问题进一步恶化。任何超过2或3级的特异性，可能有更好的方法来做到这一点。 – rwacarter 2015-01-21 09:57:05

@rwacarter是的，但这是要求。 – VenomVendor 2015-01-21 10:03:31

如果我理解正确的话，你可以使用@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; 
}

来源

2015-01-21 10:04:01 Vucko

是的，有没有其他方法可以在'@ 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; 
      } 
     } 
    } 
}

来源

2015-01-21 13:18:08 cimmanon

这看起来比现有的要复杂得多，嵌套'.c'不止一次，我想避免这种情况。 – VenomVendor 2015-01-21 14:05:38

删除SASS中的扩展选择器

回答

相关问题