SCSS - ネストされたクラスのダブルアンパサンド

Question

SASSプロセッサでは、&はネストされたルールの親セレクタを参照します。だから私はこのような何かをすることができます：

.klass { 
    color: green; 

    & + & { 
    color: red;   
    } 
} 

しかし、クラスが入れ子になったときに失敗します。フィドルhere。

.container { 
    .klass { 
    color: green; 

    // v1: fails 
    & + & { 
     color: red; 
    } 

    // v2: fails 
    & + .container .klass { 
     color: red; 
    } 

    // v3: succeeds 
    & + .klass { 
     color: red; 
    } 
    } 
} 

ネストされていない親セレクタの繰り返しを含まないソリューションはありますか？ &はまたあなた.containerが含まれていること、だから、

：出力は次のようになります。

.container .klass + .container .klass

あなたはそれを行うことができ、ネスト解除あなたが言ったように

Answer 1

私は、このソリューションでクラスを変数として使用したいと思っています。私は最高の解決策はあなたが言う& + .klassだと思うが、あなたが本当にmixinでそれを参照したくない場合は、それからコードを繰り返す必要があります。

@mixin nested($type, $selector){ 
    @if $type == 'original'{ 
    #{$selector}{ 
     @content 
    } 
    } 
    @if $type == 'sibling'{ 
    & #{$selector} + #{$selector}{ 
     @content 
    } 
    } 

} 

.container{ 
    @include nested('original','.klass'){ 
    color:green; 
    } 
    @include nested('sibling','.klass'){ 
    color:red; 
    } 
} 

そして、この出力：

.container .klass { 
    color: green; 
} 
.container .klass + .klass { 
    color: red; 
} 

Answer 2

、あなたは（全体の）親セレクタを参照していますあなたの.klass：

http://codepen.io/anon/pen/RVNrKj?editors=0100#anon-login