[ SASS/SCSS 입문 ] SASS의 중첩의 규칙

 

 

CSS를 작성할 때, 반복적인 선택자의 사용은 

코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 

이러한 문제를 해결하기 위해 Sass에서는 중첩 규칙이라는 강력한 기능을 제공합니다. 

 

이 글을 통해 중첩 규칙의 개념부터 실제 사용 예제, 주의사항까지 상세하게 알아보겠습니다.

 

 

 

 

중첩규칙의 개념 및 필요성

---

 

중첩규칙은 CSS 선택자를 HTML의 구조와 유사하게 Sass에서 표현할 수 있게 해줍니다. 

이는 마크업 구조를 CSS에 직관적으로 반영할 수 있게 하여, 

코드의 가독성과 유지보수성을 대폭 향상시킵니다. 

중첩규칙을 사용하면, 상위 선택자를 반복해서 작성할 필요 없이, 

관련 스타일을 그룹화하여 표현할 수 있습니다.

 

 

기본 중첩 규칙 및 사용법 예제

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

/* Compile to 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;
}

 

위 예제에서 nav 태그 안에 있는 ul, li, a 태그 각각에 대한 스타일을 중첩하여 표현하고 있습니다. 

이 방식은 HTML 구조를 CSS에 직접적으로 매핑하여, 

어떤 HTML 요소에 스타일이 적용되는지 쉽게 파악할 수 있게 해줍니다.

 

 

 

부모 선택자 참조(&)의 사용

---

 

Sass의 중첩 규칙에서는 & 기호를 사용하여 부모 선택자를 참조할 수 있습니다.

이는 주로 상태가 변할 때의 스타일이나, 특정 클래스가

부모에 적용됐을 때의 스타일을 정의할 때 유용합니다.

 

.btn {
  padding: 10px 20px;
  border: none;
  &.active {
    background-color: blue;
  }
  &:hover {
    background-color: lightblue;
  }
}

/* Compile to CSS */

.btn {
  padding: 10px 20px;
  border: none;
}
.btn.active {
    background-color: blue;
}
.btn:hover {
    background-color: lightblue;
}

 

위 코드에서 .btn에 대한 기본 스타일을 정의하고, 

.btn이 .active 클래스를 가지거나, 

호버 상태일 때의 스타일을 &를 사용하여 간결하게 표현하고 있습니다.

 

 

 

중첩규칙의 깊이와 가독성에 대한 고려 사항

---

 

중첩 규칙은 강력하지만, 너무 깊게 중첩되면 

오히려 코드의 가독성을 해치고 유지보수를 어렵게 할 수 있습니다. 

일반적으로는 3단계 이상 깊게 중첩하지 않는 것이 좋습니다. 

너무 깊은 중첩은 스타일 규칙을 찾기 어렵게 만들고, 

예상치 못한 부작용을 초래할 수 있습니다.

 

 

중첩규칙의 오용 예제 및 주의사항

nav {
  ul {
    li {
      a {
        &:hover {
          // 너무 깊은 중첩
        }
      }
    }
  }
}

 

위와 같이 너무 깊게 중첩된 규칙은 가독성을 저하시키고, 

특정 스타일을 수정하거나 찾아야 할 때 시간이 더 많이 소요될 수 있습니다. 

특히, CSS는 기본적으로 전역 범위를 가지므로, 너무 구체적인 선택자를 사용하면 

다른 스타일에 영향을 미칠 수 있어 주의가 필요합니다.

 

 

 

주의사항

---

 

중첩의 깊이

가능하면 중첩의 깊이를 3단계 이내로 유지하세요.

이는 코드의 가독성을 유지하고, 스타일의 의도치 않은 상속을 방지하는 데 도움이 됩니다.

 

범용 선택자의 사용

중첩 내에서 범용 선택자(*, >, + 등)의 사용은 성능 저하를 초래할 수 있으므로 주의해야 합니다.

필요한 곳에서만 최소한으로 사용하세요.

 

부모 선택자(&)의 오용

&는 매우 유용하지만, 오용할 경우 예상치 못한 결과를 초래할 수 있습니다.

특히, 중첩된 상태에서 &를 사용할 때는 결과적으로 생성되는 선택자를 정확히 이해하고 있어야 합니다.

 

코드의 재사용

중첩 규칙을 사용하더라도, 반복되는 스타일 패턴은

믹스인(mixin)이나 확장(extend)을 통해 재사용할 수 있음을 기억하세요.

이는 코드의 중복을 줄이고, 프로젝트의 일관성을 유지하는 데 도움이 됩니다.

 

 

 

Sass의 중첩 규칙은 CSS 작성을 더욱 효율적이고 직관적으로 만들어 줍니다.

하지만 강력한 기능일수록 그 사용에는 주의가 필요합니다.

적절한 중첩 깊이 유지, 코드의 재사용, 그리고 & 사용에 주의를 기울임으로써,

깔끔하고 유지보수가 용이한 스타일 시트를 작성할 수 있습니다.

Sass를 사용할 때는 이러한 사항들을 항상 염두에 두고,

효율적이면서도 가독성 높은 코드를 작성하기 위해 노력하세요.