SCSS 상위 선택자 참조

상위 선택자를 참조하는 방법: & 기호 이용

 

예제

// & - 자신의 영역에 해당하는 상위 선택자 참조

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

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

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

 

CSS로 어떻게 컴파일되는지 확인