중첩 | Notion

다음의 html을 살펴보자.

<body>
    <div class="container">
        <ul>
            <li>
                <div class="name">hyeonjin</div>
                <div class="age">85</div>
            </li>
        </ul>
    </div> 
</body>

SCSS는 태그간의 중첩관계를 CSS에서도 사용할 수 있게 해준다! 따라서 HTML의 구조가 중첩될수록 SCSS가 빛을 발한다.

.container {
  ul {
    li {
      .name {
      }
      .age {
      }
    }
  }
}

💡 이때 CSS의 셀렉터 문법은 동일하게 사용한다.

.container {
  ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        columns: orange;
      }
    }
  }
}

Untitled

만약 셀렉터를 이용할때, 자식 요소를 가리키고 싶다면 다음처럼 > 를 붙인다.

.container {
  **>** ul {
    **>** li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        columns: orange;
      }
    }
  }
}