私はSCSSでこのようにそれを実行しようとしました、

Question

[OK]を、私は

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

したがって、次の伝統的なCSSを持っているとサスと最後まで親セレクタを追加アンパサンドはセレクタの冒頭にしか現れないように思えるので、うまくいきません。回避策はありますか？あなたの.socialメディア{

/* ... */ 

    .twitter { 
     /* ... */ 
    } 
    .facebook { 
     /* ... */ 
    } 
} 

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

サス3.3 以降

：あなたが行うことができます

Answer 1

サス3.2およびそれ以前

唯一のことは、すべてのあなたのネストやない巣を逆になっています補間と@at-rootディレクティブを使用して行うことができます。

.social-media { 
    /* ... */ 

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

あなたの親セレクタが複数のセレクタが含まれている場合は、あなたの代わりにselector-appendを使用する必要があります：

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

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

出力：

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