[CSS] & | SCSS 를 쓰지 않고도 CSS 도 중첩 사용이 가능하게 해줌

원래 SCSS 에서만 사용 가능했던 중첩(nesting) 이  CSS 에서도 사용이 가능해졌다. (이 사실을 모르고 사용하지 않는 경우가 많은 것 같다. )

 

예를 들어, SCSS 에서는 다음과 같이 중첩이 가능했다.

.section {
  h2 {
    color: #008080;
  }

  p {
    font-size: 16px;
  }
}

 

 

하지만 이제는 CSS 에서도 다음과 같이 중첩 사용이 가능해졌다. 

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

 

 

그러나, 현재 까지는 제한 사항이 존재한다. 바로 유형선택기에서는 사용이 지원하지 않는다는 점이다.  여기서 유형선택기(type selectors)란 아래와 같이 흔히 a, span 과 같은 태그를 명시하여 스타일을 적용하는 것을 의미한다. 즉, class 나 id 선택자 를 통해서 사용해야지만 정상적으로 적용할 수 있다.

span {
  color: white;
}

 

 

그럼에도 불구하고, 이제는 SCSS 를 별도로 설치하지 않고도 이러한 편의 기능을 사용할 수 있다는 점에서 자주 애용할 듯 싶다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

& nesting selector - CSS: Cascading Style Sheets | MDN