Mở rộng bộ chọn hợp thành trong SASS

Việc áp dụng chỉ thị @extend không giới hạn chỉ ở các bộ chọn lớp. Có thể mở rộng về nguyên tắc bất kỳ bộ chọn nào, thậm chí cả các phần tử đơn lẻ. Hãy xem xét điều này qua ví dụ:

Xem xét ví dụ:

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

Kết quả sau khi biên dịch, chúng ta sẽ thấy, rằng .active-link kế thừa thuộc tính color từ a:active:

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

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

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;
}