Direktivet !optional i @extend i SASS

När du utökar en selektor kan du få ett fel om direktivet @extend inte fungerade korrekt. Till exempel, om du har följande kod:

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

Om ingen selektor innehåller .main, kommer ett fel att uppstå vid kompilering. I så fall behöver vi kombinera selektorsekvenser, för vilket vi använder direktivet @extend.

Dessutom kommer ett fel att uppstå om selektorn som innehåller .main är sådan: h1.main, vilket förklaras av en konflikt mellan a och h1.

Så, vid behov, kan du tillåta direktivet @extend att inte skapa nya selektorer med hjälp av direktivet för valfrihet !optional, skrivet efter selektorn. Till exempel:

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