Nesting

Nesting은 '중첩'이라는 뜻을 가진 단어입니다. SCSS(SASS)는 중첩이라는 기능을 지원해서 기존 CSS에서 셀렉터를 활용하는데 발생했던 여러 불편함들을 없애주고 있습니다.

예를들어 CSS에서 어떤 자식요소를 선택하기 위해서는 다음과 같이 사용했어야 했습니다.

CSS

<div>
  <p>응애</p>
</div>

div {
  background-color: blue;
}
div p {
  border-style: dashed;
}

SCSS에서는 중첩 기능을 지원함으로써 좀 더 직관적이고 편하게 요소의 구조를 나타내고 선택할 수 있게 되었습니다.

SCSS(SASS)

div {
  background-color: blue;
  p {
    border-style: dashed;
  }
}

중첩에서 부모 셀렉터 참조

SCSS에서는 & 기호를 사용하여 중첩 내부에서 부모 요소를 더 쉽게 참조할 수 있습니다. 개인적으로 SCSS를 사용하면서 가장 편리했던 기능이었습니다.

CSS

.btn {
  border-radius: 4px;
}

.btn:hover {
  background-color: yellow;
}

SCSS

.btn {
  border-radius: 4px;
  &:hover {
    /* &가 현재 요소의 부모요소인 button을 가리킵니다. */
    background-color: yellow;
  }
}

중첩 속성

속성 중에 margin-으로 시작하는 margin-top, margin-bottom, margin-left, margin-right와 같은 이름을 갖는 속성들이 있습니다. (font-, padding-, background- 등등) SCSS에서는 이들을 중첩을 통해서 간편하게 표현할 수 있습니다.

CSS

div {
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 20px;
}

SCSS

div {
  margin: {
    top: 0px;
    bottom: 5px;
    left: 10px;
    right: 20px;
  }
}

중첩 탈출 @at-root

@at-root를 셀렉터 앞에 붙이면 현재 중첩을 탈출합니다. 보통 아래 예시와 같이 변수를 활용하기 위해서 사용됩니다.

SCSS

.box1 {
  $boxWidth: 150px;
 
  width: $boxWidth;
  @at-root .box2 {
    width: $boxWidth;
  }
}

위 코드의 컴파일 결과는 다음과 같습니다.

.box1 {
  width: 150px;
}
.box2 {
  width: 150px;
}