SCSS - 중첩

상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성 가능.

 
// 이렇게 작성시
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}
 
// 이렇게 컴파일 됨
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

-

Ampersand (상위 선택자 참조)

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환합니다.

-

@at_root (중첩 벗어나기)

중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용.

중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용.

*특정 변수를 범위 밖에서 사용하고 싶을때..(굳이?)

-

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용 가능.