Sass .scss：divで余分なクラスを入れ子にします

Question

を簡易display:none/blockで表示しようとしています。ボタンをクリックするとdivに.activeクラスが追加されます。

SASSを使用してこの.activeクラスをターゲティングすることはできませんが、ネストしようとするとできません。

HTML：

<div class="MyDiv"> 
    I'm a hidden div. But when some button is clicked I get the class Active 
</div> 

Javascriptを

$(".MyDiv").on("click", function() { 
    $(this).toggleClass("active"); 
}); 

CSS：（SASSは、コンパイル後に、私は何を期待）

.MyDiv { 
    display:none; 
} 

.MyDiv.active { 
    display:block; 
} 

SASS

.MyDiv { 
    display:none; 

    .active { 
    display:block; /* this one doesn't work */ 
    } 
} 

Answer 1

あなたが書いている方法を書くとき、それはあなたが望むものではありませんどの.MyDiv .activeにコンパイルは、あなたが&.activeを使用する必要があるので、あなたの選択はあなたがいる.MyDiv.active

.MyDiv { 
    display: none; 

    &.active { 
    display: block; 
    } 
} 

Answer 2

になりますSassを正しく使用していない。 MyDiv用の別の兄弟クラスが必要な場合は、Sassで& .activeを使用する必要があります。 Link to Css-Tricks

.MyDiv { 
    display:none; 
    &.active { 
    display:block; 
    } 
} 

それはあなたのコードがコンパイルに

.MyDiv.active { 
    display: block; 
} 

にコンパイルされます。 .MyDivと.activeの間のスペースが表示されます

.MyDiv .active { 
    display: block; 
}