SASS의 복합 선택자 확장

@extend 지시어의 사용은 클래스 선택자에만 국한되지 않습니다. 원칙적으로 어떤 선택자든 확장할 수 있으며, 심지어 단일 요소도 가능합니다. 예제를 통해 살펴보겠습니다:

다음 예제를 살펴보세요:

style.scss.active-link {
  @extend a:active;
}
  
a:active {
  color: blue;
}

컴파일 결과, .active-link가 a:active의 color 속성을 상속받는 것을 볼 수 있습니다:

style.cssa:active, .active-link {
  color: blue;
}

Задание 1

다음 코드의 컴파일 결과는 어떻게 될까요?

styles.scssbutton {
  @extend .box:hover;
}
  
.box:hover {
  color: #14147e;
}

Задание 2

다음 코드의 컴파일 결과는 어떻게 될까요?

styles.scssbutton:active {
  @extend input:focus;
}

button:blur {
  @extend input:blur;
}

input:focus {
  color: #14147e;
  border-color: #b5b5d1;
}

input:blur {
  color: #040433;
  background-color: #87878f;
}