Además de los mixins, Sass ofrece otra poderosa herramienta para la reutilización de código denominada "extensiones" o "herencia". Utilizando la directiva @extend, puedes compartir un conjunto de reglas CSS entre múltiples selectores. Esta capacidad permite que tu CSS sea más eficiente y mantenga un enfoque DRY (Don't Repeat Yourself).

Concepto de @extend

La directiva @extend permite que un selector adquiera todas las propiedades de otro selector, como si estuviera heredando sus características. Es especialmente útil para estilos que se repiten en varios elementos.

Ejemplo básico

scss

Resultado en CSS:

css

Extensión y Especificidad

La directiva @extend combina selectores en el CSS resultante, lo que puede incrementar o disminuir la especificidad de tus selectores dependiendo de cómo y dónde la utilices.

Ejemplo:

scss

Resultado en CSS:

css

Herencia en Selectores Anidados

@extend también puede usarse en selectores anidados para compartir reglas entre selectores anidados.

scss

Limitaciones de @extend

Aunque @extend es muy útil, también tiene algunas limitaciones y desventajas que debes tener en cuenta:

1. Especificidad:

   • Puede generar selectores inesperadamente específicos o generales, complicando la administración de estilos.

2. Mantenimiento:

   • Los cambios en los selectores extendidos pueden afectar a varios elementos, lo que puede ser difícil de mantener en proyectos grandes.

3. Rendimiento:

   • Puede generar un CSS final más grande debido a la combinación de selectores.

Uso de Placeholders con %

Para evitar problemas de especificidad y aumentar el rendimiento, puedes utilizar placeholders en lugar de clases. Los placeholders se definen usando el prefijo % y no se renderizan en el CSS final a menos que sean extendidos.

Ejemplo con Placeholders

scss

Resultado en CSS:

css

Ejemplo Completo

Veamos un ejemplo más completo que muestra cómo combinar @extend y % placeholders para crear un componente reutilizable y modular.

scss

Conclusión

La herencia y las extensiones en Sass proporcionan una forma poderosa de compartir estilos entre múltiples elementos sin duplicar código. Sin embargo, es importante usar @extend con precaución debido a sus limitaciones en cuanto a especificidad y rendimiento. Utilizar placeholders puede ayudarte a mitigar algunos de estos problemas y mejorar la modularidad de tu CSS. En el siguiente capítulo, exploraremos las funciones y operaciones en Sass, que añadirán aún más dinamismo y flexibilidad a tus hojas de estilo.