Extend y selectores placeholder

@extend permite que un selector herede todos los estilos de otro. En lugar de duplicar código, la extensión crea un conjunto de reglas compartidas en el CSS compilado.

Un selector placeholder (con el prefijo %) define un bloque de estilos que nunca se compila por sí solo, sino únicamente cuando se extiende. No genera CSS a menos que algo lo extienda.

Extender una clase real añade todo el contexto del selector de esa clase a la salida compilada. Los placeholders son más limpios: generan selectores agrupados únicamente para los selectores que los extienden.

Cuando varios selectores extienden el mismo placeholder, Sass los agrupa en una regla separada por comas:

@extend tiene inconvenientes importantes:

• No puede usarse dentro de consultas de medios
• Puede producir selectores agrupados grandes e inesperados cuando se encadenan varias extensiones
• Hace que sea más difícil rastrear el CSS compilado hasta los archivos de origen

Comparación:

• @extend: CSS más pequeño (reglas compartidas), pero cadenas de selectores complejas y limitaciones en consultas de medios
• @mixin: duplica las declaraciones, pero es más predecible y puede usarse dentro de consultas de medios

En la práctica moderna de Sass, normalmente se prefieren los mixins a @extend. HTTP/2 y la compresión gzip hacen que la duplicación de declaraciones sea menos importante, mientras que la facilidad de depuración de los mixins compensa la mínima diferencia en el tamaño del CSS.

@extend (con placeholders) es adecuado cuando:

• Varios selectores comparten realmente el mismo estado semántico (por ejemplo, estados de error)
• No se encuentra dentro de una consulta de medios
• Los estilos base son estables y están bien definidos

Los placeholders funcionan bien para conjuntos de utilidades similares a los resets que heredan varios componentes:

Algunas guías de estilo y equipos prohíben completamente @extend debido a su complejidad y al crecimiento excesivo de selectores que puede provocar. Conozca las ventajas y desventajas, y siga las convenciones de su equipo.

¿Cuál es la diferencia entre extender una clase normal y extender un selector placeholder (%)?

@extend permite que un selector herede los estilos de otro, agrupando los selectores en el CSS compilado. Los placeholders (%name) no se compilan hasta que se extienden, por lo que son más limpios que extender clases reales. Evite usar @extend dentro de consultas de medios. En el Sass moderno, normalmente se prefieren los mixins a @extend por su previsibilidad y facilidad de depuración.