SCSS 중첩 with SassMeister

SCSS 중첩

SCSS와 같은 CSS 전처리 도구를 사용하면서 가장 유용하게 사용하는 기능은 바로 중첩(Nesting)입니다. 이는 CSS를 통해 반복해서 사용했던 상위 선택자들을 중첩 기능을 통해 매우 간단하게 표현할 수 있습니다.

1. HTML

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

2. SCSS

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

3. CSS(Compiled)

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

4. SassMeister

SassMeister는 SCSS를 통해 코딩한 작업을 컴파일이 완료된 CSS로 실시간으로 보여주는 사이트입니다. SCSS를 학습하는 데에 매우 유용하므로 참고하시면 도움이 될 것입니다.

SassMeister