Nhãn !optional trong @extend trong SASS
Khi mở rộng bộ chọn, có thể gặp phải
lỗi khi chỉ thị @extend
không hoạt động chính xác. Ví dụ,
nếu bạn có mã sau:
a.info {
@extend .main;
}
Nếu không có bộ chọn nào chứa .main,
thì khi biên dịch sẽ xảy ra lỗi.
Trong trường hợp như vậy, chúng ta cần kết hợp
các chuỗi bộ chọn,
để làm điều này chúng ta sử dụng chỉ thị @extend.
Ngoài ra, sẽ có lỗi nếu bộ chọn
chứa .main lại có dạng như sau:
h1.main, điều này được giải thích là do xung đột
giữa a và h1.
Vì vậy, khi cần thiết, bạn có thể
cho phép chỉ thị @extend không tạo ra
bộ chọn mới bằng cách sử dụng nhãn tùy chọn
!optional, được viết sau bộ chọn. Ví dụ:
a.info {
@extend .main !optional;
}
