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:

style.scssa.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:

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