用Sass将父select器追加到最后

好吧，假设我有以下传统的CSS

.social-media { /* ... */ } .social-media .twitter { /* ... */ } .social-media .facebook { /* ... */ } ul.social-media { /* ... */ } 

所以，我试图用SCSS这样做：

 .social-media { /* ... */ .twitter { /* ... */ } .facebook { /* ... */ } // Here's the problem: ul& { /* ... */ } } 

最后一部分不起作用，因为它看起来像＆符号应该只出现在select器的开头。 有没有解决方法？

Answer 1

Sass 3.2以上

你可以做的唯一的事情就是反转你的嵌套或不嵌套：.social-media {

  /* ... */ .twitter { /* ... */ } .facebook { /* ... */ } } ul.social-media { /* ... */ } 

Sass 3.3及更高版本

你可以使用插值和@at-root指令来做到这一点：

 .social-media { /* ... */ // Here's the solution: @at-root ul#{&} { /* ... */ } } 

但是，如果您的父select器包含多个select器，则需要使用selector-append ：

 .social-media, .doodads { /* ... */ // Here's the solution: @at-root #{selector-append(ul, &)} { /* ... */ } } 

输出：

 .social-media, .doodads { /* ... */ } ul.social-media, ul.doodads { /* ... */ }