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:
a.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:
a.info {
@extend .main !optional;
}
