Η ετικέτα !optional στο @extend στο SASS

Κατά την επέκταση ενός επιλογέα μπορεί να προκύψει σφάλμα, όταν η οδηγία @extend δεν λειτούργησε σωστά. Για παράδειγμα, αν έχετε τον ακόλουθο κώδικα:

a.info {
	@extend .main;
}

Αν κανένας επιλογέας δεν περιέχει το .main, τότε κατά τη μεταγλώττιση θα προκύψει σφάλμα. Σε μια τέτοια περίπτωση, πρέπει να συνδυάσουμε ακολουθίες επιλογέων, για τα οποία χρησιμοποιούμε την οδηγία @extend.

Επιπλέον, θα προκύψει σφάλμα αν ο επιλογέας που περιέχει το .main είναι όπως εδώ: h1.main, κάτι που εξηγείται από τη σύγκρουση μεταξύ a και h1.

Επομένως, εάν χρειαστεί, μπορείτε να επιτρέψετε στην οδηγία @extend να μην δημιουργεί νέους επιλογείς χρησιμοποιώντας την ετικέτα προαιρετικότητας !optional, που γράφεται μετά τον επιλογέα. Για παράδειγμα:

a.info {
	@extend .main !optional;
}