Penanda !optional dalam @extend di SASS

Apabila mengembangkan pemilih, anda mungkin akan mendapat ralat apabila arahan @extend tidak berfungsi dengan betul. Sebagai contoh, jika anda mempunyai kod berikut:

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

Jika tiada pemilih yang mengandungi .main, ralat akan berlaku semasa pengkompilan. Dalam kes sedemikian, kita perlu menggabungkan urutan pemilih, untuk itu kita menggunakan arahan @extend.

Selain itu, ralat akan berlaku jika pemilih yang mengandungi .main adalah seperti: h1.main, yang dijelaskan oleh konflik antara a dan h1.

Oleh itu, jika perlu, anda boleh membenarkan arahan @extend untuk tidak mencipta pemilih baharu dengan menggunakan penanda pilihan !optional, ditulis selepas pemilih. Contohnya:

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