SASS 상위(부모) 선택자 참조

상위(부모) 선택자 참조

& 기호를 이용하여 상위 선택자를 참조할 수 있습니다. 결국 &는 &가 있는 범위에 해당하는 선택자라고 보시면 됩니다. 아래 예시를 보시면 더욱 쉽게 이해할 수 있습니다.

1. SCSS

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

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

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

2. CSS(Compiled)

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

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

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