SCSS - Nesting

상위 선택자의 반복을 피할 수 있다.

중첩 내 &를 사용해 상위(부모) 선택자를 참조할 수 있다.

// CSS
.fs-small { ... }
.fs-medium { ... }
.fs-large { ... }

// SCSS
.fs {
    &-small { ... }
    &-medium { ... }
    &-large { ... }
}

중첩 내 @at-root를 사용해 중첩을 벗어날 수 있다.

• 중첩 안에서 생성하되 중첩 밖에서 사용할 경우 유용. => 중첩 내 변수를 중첩 밖에서 사용하고 싶을 때 사용

동일한 네임 스페이스를 가진 속성을 다음과 같이 사용할 수 있다.

// CSS
.fs {
    font-weight: bold;
    font-size: 10px;
}

// SCSS
.fs {
    font: {
        weight: bold;
        size: 10px;
    }
}