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:

style.scssa.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ụ:

style.scssa.info {
  @extend .main !optional;
}