La herencia en Sass es una técnica que te permite reutilizar estilos entre selectores y mantener tu CSS organizado, limpio y fácil de escalar. Si estás aprendiendo Sass y quieres entender cuándo aplicar @extend en un proyecto real, aquí vas a ver cómo funciona y dónde tiene sentido usarla dentro de un diseño tipo Figma.

¿Qué es la herencia en Sass y para qué sirve?

La herencia permite que un selector reciba estilos que ya definiste antes en otro selector, e incluso puede tomar valores que vienen de variables de CSS. La idea es simple: si dos elementos comparten características visuales, no los escribas dos veces.

¿Qué hace la directiva @extend en Sass? Toma todos los estilos de una clase existente y los aplica a otro selector, evitando que repitas reglas. Así tu hoja de estilos queda más corta y tu código más mantenible.

En la clase se introduce la directiva @extend como la herramienta principal de herencia dentro de Sass [0:32]. Su valor está en que te ayuda a estructurar el código sin duplicar propiedades.

¿Cómo se usa @extend con un ejemplo práctico?

El ejemplo trabajado en la clase parte de una clase llamada error que contiene dos propiedades: un border con grosor en píxeles y color, y un background-color también con su color asignado [0:54].

Dentro de esa misma clase aparece un selector con ampersand (&) seguido de un modificador llamado serious. Ese modificador usa @extend para heredar los estilos de error y, además, añade una propiedad nueva: border-width de tres píxeles [1:20].

El resultado es directo:

• serious recibe el border de error.
• serious recibe el background-color de error.
• serious suma su propio border-width: 3px.

scss .error { border: 1px solid red; background-color: pink;

&--serious { @extend .error; border-width: 3px; } }

Este patrón es la base para construir variantes de un componente sin repetir líneas.

¿Qué es el ampersand y el modificador de clase?

El ampersand (&) es una referencia al selector padre dentro de Sass, y un modificador de clase es una variante que extiende su comportamiento. Juntos te permiten agrupar variantes de un mismo componente en un solo bloque de código.

¿Dónde aplicar herencia en un proyecto real de Figma?

En el proyecto del curso ya están trabajadas la navbar y la main section, y aparecen dos bloques muy parecidos: la sección de cuidado de la salud y la sección de decoración del hogar [2:00].

Al hacer zoom en el diseño, las tarjetas de ambas secciones comparten estructura, pero cambian en detalles puntuales:

• El color del texto: en decoración del hogar la letra es blanca, mientras que en cuidado de la salud usa el verde del proyecto.
• El icono: aparece un corazón distinto entre una sección y otra.
• El color de fondo de la tarjeta.

Y aquí viene lo interesante: si creas una clase base para la tarjeta, puedes usar @extend para heredar toda la estructura común, y luego modificar solo los elementos que cambian entre secciones. Eso es exactamente el caso de uso que justifica la herencia.

¿Cuándo conviene usar @extend en lugar de repetir clases? Cuando dos componentes comparten la mayoría de sus propiedades y solo cambian detalles como color, icono o tamaño. Heredas la base y sobreescribes lo distinto.

¿Qué ganas al aplicar herencia en componentes repetidos?

Ganas tres cosas concretas: menos líneas de CSS, un código más fácil de actualizar cuando cambie el diseño, y consistencia visual entre componentes que deben verse como familia. Si mañana cambia el border de las tarjetas, lo modificas en un solo lugar.

¿Identificas otros elementos del proyecto donde podrías aplicar herencia? Déjalo en los comentarios.