[SCSS] Nesting (중첩)

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

& (상위 선택자 참조)

부모 선택자를 선택할 때 사용합니다.

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}
.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

& 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용할 수도 있습니다.

SCSS

.fs {
  &-small {
    font-size: 12px;
  } /* 이름을 새로 지정하는 방법 */
  &-medium {
    font-size: 14px;
  }
  &-large {
    font-size: 16px;
  }
}

CSS

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

at-root

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

SCSS

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w; /* box는 밖에서 사용해야하지만, 변수사용으로 인해 하는수 없이 중첩했다. 그리고 @at-root를 통해서 빠져나온다 */
    height: $h;
  }
}

CSS

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}