3. 중첩

기존 CSS에서 부모요소 안에 있는 자식요소를 꾸며주기 위해선 아래와 같이 코드를 작성해야했다.

header .sub-menu ul.menu {

}

header .sub-menu ul.menu li {

}

header .sub-menu ul.menu li::before {

}

 이렇게 작성하게 되면 자식요소를 추가하여 꾸밀때 마다 앞부분을 중복하여 작성해야한다. 하지만 SCSS에서는 중첩을 통해 번거로움을 해결할 수 있다.

 

/* SCSS */
.container2 {
> ul {
    li {
      font-size: 40px;
      .name {
        color: blue;
      }
      .age {
        color: orange;
      }
    }
  }
}

/* CSS */
.container2 > ul li {
  font-size: 40px;
}
.container2 > ul li .name {
  color: royalblue;
}
.container2 > ul li .age {
  color: orange;
}

괄호로 묶어  표시할 수 있다. ul 앞의 > 기호는 ul이 contatiner2의 자식요소임을 표시하기 위해서 사용한다.