[SCSS] 상위 셀렉터 참조

상위 셀렉터 참조

SCSS/SASS 문법은 특수 문자 &를 이용하여 자신이 포함된 상위 셀렉터를 참조할 수 있습니다. 

<div>
	<h1>안녕하세요.</h1>
    <p>내용을 적어보겠습니다.</p>
    <p class="second">다른 내용을 적어보겠습니다.</p>
</div>

p {
    font-size: 20px;
    color: black;
    &.second {	/* &.second = p.second */
        color: red;
    }
}

스타일 덮어쓰기

이러한 문법은 특정 클래스 안에서 스타일을 덮어쓰는 작업을 할 때, 유용하다.

<div class="container">
    <div class="page">
        <p>Hello?</p>
    </div>
</div>

.page p {
    color: orange;
    .container & { /* .container & = .container .page p */
        color: green;
    }
}