중첩
설치를 잘 마쳤으니, 이제는 직접 사용해봅시다.
해당 글은 기본적으로 CSS지식이 있다는 전제하에 작성되었습니다.
1. 선택자의 중첩
Sass의 공식사이트에 따르면 HTML을 작성할때 명확한 중첩 및 시각적 계층 구조가 있지만, CSS는 그렇지 않다고 되어 있습니다.
Sass는 HTML의 동일한 시각적 계층을 따르는 방식으로 CSS선택자를 중첩할 수 있게 되어있습니다.
아래 예제를 우선 살펴봅시다.
SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}상위 선택자를 반복적 작성하는 방법을 피하고 좀 더 편리하게 구조를 작성할 수 있습니다.
너무 많은 중첩은 유지관리를 어렵게 만들고 가독성이 떨어지므로 작성할때 유의하도록 합니다.
2. 속성의 중첩
font- , text-, border-, background- 등의 CSS속성(Property)도 중첩사용이 가능합니다.
SCSS
.violet {
font: {
family: 'Cairo','Noto Sans KR', sans-serif;
size: 20px;
weight: 500;
}
border: {
width: 1px 0;
style: solid;
color: #000;
}
}CSS
.violet {
font-family: "Cairo", "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 500;
border-width: 1px 0;
border-style: solid;
border-color: #000;
}3. 상위 선택자 참조 (&, Ampersand)
중첩 안에서 & 키워드를 사용하여 상위(부모) 선택자를 참조할 수 있습니다.
아래의 여러가지 케이스로 어떻게 작성되는지를 확인해봅시다.
SCSS
.btn {
padding: 5px 10px;
color: #fff;
&.prev {
background-color: black;
}
&.next {
background-color: red;
}
&_prev {
background-color: black;
}
&_next {
background-color: red;
}
}
CSS
.btn {
padding: 5px 10px;
color: #fff;
}
.btn.prev {
background-color: black;
}
.btn.next {
background-color: red;
}
.btn_prev {
background-color: black;
}
.btn_next {
background-color: red;
}
위의 예제를 보면 &는 상위 선택자 + 하위 선택자로 컴파일 되는걸 확인할 수 있습니다.
가상 클래스 선택자(Pseudo-classes)
많이 사용하는 :hover, ::before, ::after 등의 가상 클래스 선택자(Pseudo-classes)들을 사용할때 유용하게 사용할 수 있습니다.
SCSS
button {
background-color: black;
&:hover {
background-color: red;
}
&::before {
content: '';
}
}CSS
button {
background-color: black;
}
button:hover {
background-color: red;
}
button::before {
content: "";
}BEM(Block, Element, Modifier) 방법론에서 사용
상위 선택자를 가져가는 BEM방법론을 더 효율적으로 사용할 수 있습니다.
SCSS
.btn {
&--modifier {
property: value;
}
&--point {
property: value;
}
}
.header {
&__element {
property: value;
}
&__nav {
property: value;
}
}CSS
.btn--modifier {
property: value;
}
.btn--point {
property: value;
}
.header__element {
property: value;
}
.header__nav {
property: value;
}
연결자(Combinators)와 함께 사용
연결자와 함께 &를 사용하는 건 매우 쉽습니다.
&[공백] [연결자]의 형식으로 사용합니다.
SCSS
.btn {
& > span {
property: value;
}
& + span {
property: value;
}
& ~ span {
property: value;
}
}CSS
.btn > span {
property: value;
}
.btn + span {
property: value;
}
.btn ~ span {
property: value;
}그런데 위의 컴파일 결과물을 확인해보니, 아래처럼 &[공백] 삭제해도 동일한 결과가 나옵니다.
SCSS
.btn {
> span {
property: value;
}
+ span {
property: value;
}
~ span {
property: value;
}
}CSS
.btn > span {
property: value;
}
.btn + span {
property: value;
}
.btn ~ span {
property: value;
}위의 결과를 미루어 중첩은 &[공백]이 생략된 형태라고 생각하면 &를 이해하기가 더 쉬울 것 같습니다.
마치며
이번장에서는 Sass의 가장 기초인 중첩에 대해서 정리했습니다.
앞으로 나올 문법들에 비하면 아주 쉽고 간단한 내용지만,
개인적으로는 Sass를 사용할 수 밖에 없는 가장 편리한 기능이 중첩이 아닐까 생각합니다.