Articles
SASS/SCSS 소개
SASS에서 중첩(Nesting)

SASS에서 중첩(Nesting)

이 글에서는 SASS의 중첩(Nesting)에 대해 설명합니다.

SASS의 중첩을 단계별로 설명하고, 이해를 돕기 위한 샘플 코드도 함께 제공합니다.

YouTube Video

SASS에서 중첩(Nesting)

SASS는 CSS를 확장한 스타일시트 언어로, 효율적인 스타일링을 위한 다양한 기능을 제공합니다. 이 중, 중첩(Nesting)은 CSS의 계층 구조를 시각적으로 표현할 수 있는 매우 유용한 기능입니다.

중첩의 기초

SASS에서는 CSS 선택자를 계층적으로 작성하여 코드를 시각적으로 정리할 수 있습니다. 예를 들어, 아래의 CSS 코드를 중첩을 사용하여 어떻게 다시 쓸 수 있는지 살펴보겠습니다.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

SASS를 사용하면 아래와 같이 중첩을 활용하여 코드를 간결하게 작성할 수 있습니다.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}
  • 이 코드는 SASS의 중첩 기능을 사용하여 네비게이션 메뉴의 스타일을 간결하고 계층적으로 표현합니다. 중첩을 사용하면 부모-자식 관계가 시각적으로 명확해지고, 가독성이 향상됩니다.

부모 선택자 참조하기(&)

중첩된 스타일에서 부모 선택자를 참조할 필요가 있을 때는 &를 사용하세요. 이를 통해 특정 상태나 수정자를 가진 선택자를 만들 수 있습니다.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}
  • 이 코드는 SCSS에서 &를 사용하여 부모 선택자인 .button에 대해 :hover와 :active 상태를 정의합니다.

생성된 CSS 

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

미디어 쿼리 중첩하기

SASS에서는 미디어 쿼리도 중첩할 수 있습니다. 이를 통해 스타일의 관련성을 유지하면서 반응형 디자인을 구현할 수 있습니다.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}
  • 이 코드는 .container 클래스 내부에 미디어 쿼리를 중첩시켜, 화면 크기에 따라 너비가 변경되는 반응형 디자인을 구현합니다.

생성된 CSS 

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

중첩 사용할 때 주의할 점

중첩을 과도하게 사용하면 코드의 계층이 너무 깊어져서 유지보수성이 떨어질 수 있습니다. 아래 예시와 같이 지나치게 깊은 중첩은 피해야 합니다.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

이러한 코드는 중첩이 너무 깊으므로 다음과 같이 리팩토링할 수 있습니다.

1.header .nav ul li a {
2    color: red;
3}

실전 예제: 내비게이션 바

아래는 SASS의 중첩 기능을 사용한 내비게이션 바 스타일링 예제입니다.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}
  • 이 코드는 SASS 중첩을 사용하여 내비게이션 바의 목록과 링크, 그리고 hover 효과 등 스타일을 정리하고 정의합니다.

생성된 CSS 

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

요약

SASS의 중첩 기능은 CSS의 계층 구조를 간결하게 표현하고 가독성을 높일 수 있는 강력한 도구입니다. 그러나 지나친 중첩은 피하고, 코드를 체계적으로 구성하는 것이 중요합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

SASS의 맵(Map)중첩에서의 결합자