La etiqueta !optional en @extend en SASS

Al extender un selector puedes encontrarte con un error, cuando la directiva @extend no funcionó correctamente. Por ejemplo, si tienes el siguiente código:

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

Si ningún selector contiene .main, ocurrirá un error durante la compilación. En tal caso, necesitamos combinar las secuencias de selectores, para lo cual usamos la directiva @extend.

Además, habrá un error si el selector que contiene .main es así: h1.main, lo que se explica por un conflicto entre a y h1.

Por lo tanto, si es necesario, puedes permitir que la directiva @extend no cree nuevos selectores usando la etiqueta de opcionalidad !optional, escrita después del selector. Por ejemplo:

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