SCSS 중첩 기능

중첩기능을 이용하여 복잡한 작업을 해야할 때 사용하기 좋다.

 

index.html 추가

<ul>
      <li>
        <div class="name">HELLO</div>
        <div class="age">84</div>
      </li>
    </ul>

 

main.scss

// 중첩 예제
.container {
  ul {
    li {
      font-size: 40px;

      .name {
        color: royalblue;
      }

      .age {
        color: orange;
      }
    }
  }
}

 

본인이 작성한 SCSS파일을 CSS로 바뀌는 것을 확인하는 방법

사이트: SassMeister | The Sass Playground!

SassMeister | The Sass Playground!

 

자식요소로 변환하는 방법: ">" 을 추가해 준다.