Sass .scss: Nesting extra Klasse auf Div

Question

Ich versuche, eine div mit einer einfachen display:none/block anzuzeigen. Wenn auf eine Schaltfläche geklickt wird, füge ich eine .active Klasse an meine div an.

Ich möchte diese .active Klasse mit SASS Ziel, aber ich kann es nicht tun, wenn ich versuche, es zu verschachteln.

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: (Was ich nach SASS erwarten kompiliert)

.MyDiv { 
    display:none; 
} 

.MyDiv.active { 
    display:block; 
} 

SASS

.MyDiv { 
    display:none; 

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

Answer 1

Wenn Sie so, wie Sie schreiben, schreiben, kompiliert es .MyDiv .active was nicht ist, was Sie wollen, Sie &.active so Ihre Wähler .MyDiv.active

.MyDiv { 
    display: none; 

    &.active { 
    display: block; 
    } 
} 

Answer 2

Sie wird verwenden müssen sind benutze den Sass nicht richtig. Wenn Sie eine andere Geschwisterklasse für MyDiv haben möchten, müssen Sie & .active in Sass verwenden. Link to Css-Tricks

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

Es kompiliert zu

.MyDiv.active { 
    display: block; 
} 

Ihr Code kompiliert. Sie sehen den Abstand zwischen .MyDiv und .active

.MyDiv .active { 
    display: block; 
}