SASS를 사용하여 간단한 프로젝트에서 컨테이너 클래스를 중첩하는 방법은 무엇입니까?

Question

HTML :

<section> 
    <div class="container"></div> 
</section> 
<nav> 
    <div class="container"></div> 
</nav> 

방법 둥지 컨테이너 클래스? 은 아마이 마음에 들지 :

section { 
    .container { 
    } 
} 

nav { 
.continer { 
} 
} 

내가 .container에 대한 스타일을 두 배로하고 싶지 않기 때문에. 그리고없는이 맘 :

.container { 
    section { 
    } 
    nav { 
    } 
} 

를 컨테이너가 컨테이너 섹션, 섹션 아니기 때문에. 그래서 방법?

나는 "&"을 사용할 수 있지만 :

body { 
    .container { 
    section & { 
    } 
    } 
} 

가 컴파일 :

section body .container { 
} 

하지만 난이 필요합니다

body section .container { 
} 

Answer 1

당신은 '&을 사용하여 달성 할 수 '를 참조하십시오. 당신이 찾고있는 것이 아니다

.container section { 
} 

:

.container { 
    section & { 
    color: blue; 
    } 

    nav & { 
    color: black; 
    } 
} 

위는

section .container { 
    color: blue; 
} 

nav .container { 
    color: black; 
} 

에 당신이 좋아하는 다른 방법으로 주위를 컴파일 할 위에서 언급 한 방법을 컴파일합니다. 나는 내가 한 줄 더 높은 스타일의 몸을 얻을 때

section .container {color: red;} 
nav .container {color: red;} 

Answer 2

두 섹션 탐색 내에 표시됩니다 컨테이너 사업부에 스타일을 추가하려면 : 섹션 본문. 컨테이너 {} css.