De !optional markering in @extend in SASS

Bij het uitbreiden van een selector kun je een fout tegenkomen, wanneer de directive @extend niet correct werkte. Bijvoorbeeld, als je de volgende code hebt:

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

Als geen enkele selector .main bevat, dan zal er een fout optreden tijdens het compileren. In zo'n geval moeten we de selectorenummeringen samenvoegen, waarvoor we de directive @extend gebruiken.

Daarnaast, zal er een fout optreden als de selector die .main bevat er zo uitziet: h1.main, wat wordt verklaard door een conflict tussen a en h1.

Daarom kun je, indien nodig, de directive @extend toestaan om geen nieuwe selectors te maken met behulp van de optionele markering !optional, geschreven na de selector. Bijvoorbeeld:

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