A diretiva !optional em @extend no SASS
Ao estender um seletor, você pode encontrar
um erro quando a diretiva @extend
não funciona corretamente. Por exemplo,
se você tiver o seguinte código:
a.info {
@extend .main;
}
Se nenhum seletor contiver .main,
ocorrerá um erro durante a compilação.
Nesse caso, precisamos combinar
sequências de seletores,
para o qual usamos a diretiva @extend.
Além disso, haverá um erro se o seletor
contendo .main for assim:
h1.main, o que se explica pelo conflito
entre a e h1.
Portanto, se necessário, você pode
permitir que a diretiva @extend não crie
novos seletores usando a diretiva de opcionalidade
!optional, escrita após o seletor. Por exemplo:
a.info {
@extend .main !optional;
}
