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