[SCSS] 중첩(Nesting)과 선택자 상위 참조(&)

SCSS는 CSS를 확장한 언어로서 중첩(Nesting) 기능을 제공합니다. 중첩은 부모 선택자 안에 자식 선택자를 작성할 수 있도록 도와주며, 이를 통해 스타일 코드를 더욱 간결하고 가독성 좋게 작성할 수 있습니다. 또한, 선택자 상위 참조(&)를 사용하여 부모 선택자를 참조하는 기능도 제공합니다. 이 글에서는 SCSS의 중첩과 선택자 상위 참조에 대해 알아보겠습니다.

---

중첩(Nesting)

중첩은 부모 선택자 안에 자식 선택자를 포함시킴으로써 스타일 코드를 보다 간결하고 구조적으로 작성할 수 있습니다.

.navbar {
  background-color: #f1f1f1;

  li {
    display: inline-block;
    margin: 0 10px;

    a {
      color: #333;
      text-decoration: none;
    }
  }
}

위의 예제에서 .navbar 안에 li가, li 안에 a가 중첩되어 작성되었습니다. 이로 인해 CSS 코드에서의 중복을 줄이고, 스타일 속성들을 더 쉽게 관리할 수 있습니다.

---

선택자 상위 참조(&)

선택자 상위 참조(&)는 중첩된 선택자가 속한 부모 선택자를 참조하는 기능입니다. 이를 사용하여 조합된 선택자를 생성할 수 있습니다.

.button {
  display: inline-block;
  padding: 10px;

  &.primary {
    background-color: #007bff;
    color: #fff;
  }

  &.secondary {
    background-color: #6c757d;
    color: #fff;
  }
}

위의 예제에서 &를 사용하여 .button과 .primary, .secondary를 조합한 선택자들을 생성하고, 각각의 스타일을 정의하였습니다. 이렇게 함으로써 .button의 스타일 속성을 재사용하면서 각 상태에 맞는 스타일을 추가할 수 있습니다.

.button {
  display: inline-block;
  padding: 10px;
}

.button.primary {
  background-color: #007bff;
  color: #fff;
}

.button.secondary {
  background-color: #6c757d;
  color: #fff;
}

SCSS의 중첩과 선택자 상위 참조를 활용하면 CSS 코드를 더욱 간결하고 구조적으로 작성할 수 있습니다. 이를 통해 유지보수가 용이하고 모듈화된 스타일 코드를 만들 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 자세히 살펴보겠습니다.