[Vue.js] Sass Nesting(중첩) 구문

• Sass(SCSS)의 가장 강력한 기능 중 하나가 바로 중첩(Nesting) 구문입니다.

• CSS의 계층 구조를 직관적이고 구조적으로 표현할 수 있게 해줍니다.

✅ 기본 Nesting 구문 예제

🔹 SCSS 문법 (Sass의 확장 문법)

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

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: black;

        &:hover {
          color: red;
        }
      }
    }
  }
}

🔸 기존 CSS

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

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

nav ul li a:hover {
  color: red;
}

✅ Nesting에서 자주 쓰는 기호

🔍 예시: BEM 스타일과 함께 쓰기

.button {
  &__text {
    color: white;
  }

  &--primary {
    background-color: blue;
  }

  &--disabled {
    opacity: 0.5;
  }
}

.button__text { color: white; }
.button--primary { background-color: blue; }
.button--disabled { opacity: 0.5; }

❗주의: 중첩 너무 깊게 하지 말기

• Nesting은 2~3단계 정도로 유지하는 것이 유지보수에 좋습니다.

• 너무 깊으면 읽기 어렵고 CSS Specificity도 과도해질 수 있습니다.