📢 어렵고 정석적인 개념 설명보다는 저같은 초보자도 이해하기 쉽게 정리하는 것을 원칙으로 포스팅하고 있습니다. 😄
[SCSS] 선택자 중첩(Nesting)과 부모 선택자 참조 '&'
Sass(SCSS)
2022. 5. 26. 23:43
선택자 중첩
<body>
<div class="wrap">
<h1>Hello! Shawn.</h1>
<ul class="font">
<li class="font-large">Large</li>
<li class="font-medium">Medium</li>
<li class="font-small">Small</li>
</ul>
<div id="login">
<input type="text" />
<input type="password" />
<input type="email" />
<input type="checkbox" />
</div>
</div>
</body>/* 기존 CSS */
.wrap {
background-color: #eee;
}
.wrap h1 {
color: red;
}
.wrap .font {
text-align: center;
}
.wrap .font li {
list-style: none;
}
/* SCSS */
.wrap {
background-color: #eee;
h1 {
color: red;
}
.font {
text-align: center;
li {
list-style: none;
}
}
}선택자 중첩이란, 기존의 CSS에서처럼 일일이 부모 선택자를 앞에 입력하는 형태가 아닌 부모 선택자가 자식 선택자를 품고 있는 형태를 말한다. 위의 예시 코드를 보면 확실하게 알 수 있다. 기존 CSS에서는 .wrap을 모두 써줘야 했지만, SCSS에서는 그럴 필요없이 .wrap 안에 h1과 .font를 넣고, .font 안에 li를 넣는 형태로 간단하게 스타일을 줄 수 있다.
중첩 나가기
/* SCSS */
.wrap {
background-color: #eee;
h1 {
color: red;
}
@at-root .font {
text-align: center;
li {
list-style: none;
}
}
}간혹 중첩을 이용해서 CSS를 주다가 해당 부모 선택자의 중첩을 벗어나고 싶은 경우가 있을 수 있다.
예를 들면, .font의 경우 .wrap .font로 중첩되어 있다가 그냥 .wrap의 자식이 아닌 전체의 .font에 스타일을 주고 싶을 경우 .wrap에서 .font를 빼서 단독으로 쓰는 방법도 있지만, @at-root를 앞에 붙이면 쉽게 중첩을 나갈 수 있다.
부모 선택자 참조 '&'
.wrap {
.font {
&-large {
&:hover {
}
&::after {
}
&::before {
}
}
&-medium {
}
&-small {
}
}
}'&'(앰퍼샌드)는 바로 위의 부모 요소를 그대로 가져오는 부모 선택자 참조 역할을 한다.
예를 들어, .font가 부모라면 &-large는 .font-large가 되는 것이다. 또는 부모가 button 태그라면, $.btn은 button 태그 중 btn이 class인 요소를 가리킨다. 즉, '&'는 부모 선택자를 그대로 가져온다고 생각하면 된다.
1. 선택자 중첩(Nesting)이란 부모 안에 자식을 넣는 구조의 SCSS 형태이다.
2. SCSS의 '&' 기호는 부모 선택자를 가리킨다.
3. 중첩을 나갈 때는 @at-root
'Sass(SCSS)' 카테고리의 다른 글
| [SCSS] @extend로 연관성있는 선택자 속성 가져오기 (0) | 2022.06.13 |
|---|---|
| [SCSS] @mixin과 @include로 스타일 그룹 사용하기 (0) | 2022.06.07 |
| [SCSS] @import로 파일 불러오기 및 연산자 활용 (0) | 2022.05.30 |
| [SCSS] 자바스크립트처럼 CSS에서 변수 선언하고 사용하기 (0) | 2022.05.27 |
| [SCSS] 가상클래스 :is로 한 꺼번에 선택하기 (0) | 2022.05.27 |