[SCSS] 중첩(Nesting) / @at-root

CSS에서는 자식, 자손 요소 등을 선택하기 위해서는 매번 반복적으로 부모 요소까지 입력해야 하는 번거로움과 가독성이 떨어지는 등의 불편함을 없애기 위해 생긴 기능

기존 CSS

<div>
  <p>CSS 방법</p>
</div>
div {
  background-color: blue;
}
div p {
  font-size:10px;
}

SCSS

div {
  background-color: blue;
  p {
    font-size:10px;
  }
}

속성중첩

font-, margin- 등의 공통된 네임 스페이스를 가지는 속성들도 중첩시킬 수 있다.

.box {
  font: {
    weight: bold;
    family: sans-serif;
    style: bold;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 100px;
    right: 20px;
  };
}

@at-root (중첩 벗어나기)

중첩에서 벗어날 때 @at-root 키워드를 사용
중첩 안에서 생성하지만 중첩 밖에서 사용해야 경우에 쓰임

참조 : https://inpa.tistory.com/261
https://heropy.blog/2018/01/31/sass/