Die !optional-Markierung in @extend in SASS
Beim Erweitern eines Selektors kann es zu einem
Fehler kommen, wenn die Direktive @extend
nicht korrekt funktioniert hat. Zum Beispiel,
wenn Sie den folgenden Code haben:
a.info {
@extend .main;
}
Wenn kein Selektor .main enthalten ist,
wird beim Kompilieren ein Fehler auftreten.
In diesem Fall müssen wir
Selektorsequenzen kombinieren,
wofür wir die Direktive @extend verwenden.
Darüber hinaus wird ein Fehler auftreten, wenn der Selektor,
der .main enthält, so aussieht:
h1.main, was durch einen Konflikt
zwischen a und h1 erklärt wird.
Daher können Sie bei Bedarf der Direktive @extend erlauben,
keine neuen Selektoren zu erstellen, indem Sie die Markierung !optional
verwenden, die nach dem Selektor notiert wird. Zum Beispiel:
a.info {
@extend .main !optional;
}