Sass .scss : div에 여분의 클래스를 중첩

Question

과 div을 표시하려고합니다. 버튼을 클릭하면 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> 

자바 스크립트

$(".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

.MyDiv { 
    display: none; 

    &.active { 
    display: block; 
    } 
} 

Answer 2

당신이 될 것입니다 &.active를 사용해야하지 무엇 인 .MyDiv .active로 컴파일 Sass를 제대로 사용하지 마십시오. MyDiv에 다른 형제 클래스를 갖고 싶다면 Sass에서 & .active를 사용해야합니다. Link to Css-Tricks

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

그것은 당신의 코드로 컴파일

.MyDiv.active { 
    display: block; 
} 

에 컴파일합니다. .MyDiv와 .active 사이의 공간을 볼 수 있습니다.

.MyDiv .active { 
    display: block; 
}