4. 상위 선택자 참조

CSS에선 상위 선택자 참조를 위해 다음과 같이 표현했었다.

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

하지만 SCSS에서 중첩과 & 기호를 사용하여 상위 선택자를 다음과 같이 참조할 수 있다.

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

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

위와 같이 &기호를 사용하여 표현한 것을 알 수 있다. 이를 CSS로 변환하면 다음과 같다.

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

.list li:last-child {
  margin-right: 0;
}

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