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ụ:
.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:
a:active, .active-link {
color: blue;
}
Hãy cho biết, kết quả biên dịch của đoạn code sau sẽ như thế nào:
button {
@extend .box:hover;
}
.box:hover {
color: #14147e;
}
Hãy cho biết, kết quả biên dịch của đoạn code sau sẽ như thế nào:
button:active {
@extend input:focus;
}
button:blur {
@extend input:blur;
}
input:focus {
color: #14147e;
border-color: #b5b5d1;
}
input:blur {
color: #040433;
background-color: #87878f;
}
