SASS의 복합 선택자 확장
@extend 지시어의 사용은
클래스 선택자에만 국한되지 않습니다.
원칙적으로 어떤 선택자든 확장할 수 있으며,
심지어 단일 요소도 가능합니다.
예제를 통해 살펴보겠습니다:
다음 예제를 살펴보세요:
.active-link {
@extend a:active;
}
a:active {
color: blue;
}
컴파일 결과, .active-link가
a:active의 color 속성을
상속받는 것을 볼 수 있습니다:
a:active, .active-link {
color: blue;
}
다음 코드의 컴파일 결과는 어떻게 될까요?
button {
@extend .box:hover;
}
.box:hover {
color: #14147e;
}
다음 코드의 컴파일 결과는 어떻게 될까요?
button:active {
@extend input:focus;
}
button:blur {
@extend input:blur;
}
input:focus {
color: #14147e;
border-color: #b5b5d1;
}
input:blur {
color: #040433;
background-color: #87878f;
}
