Sass

Mixins con parámetros para componentes reutilizables

Crea mixins flexibles, evita duplicación de reglas y genera CSS más mantenible para botones, cards y utilidades de layout.

¿Cuánto sabes de Sass?

📘 Teoría

Cuándo sí usar mixins

Usa mixins en patrones repetidos: botones, breakpoints, focus rings o tarjetas base.

Si solo necesitas una variación mínima una única vez, mejor regla directa para no sobrediseñar.

Parámetros y valores por defecto

Los valores por defecto hacen que el mixin sea cómodo para el caso común.

Cuando una variante cambia, sobreescribes solo ese argumento y conservas estructura homogénea.

1 Cuándo sí usar mixins 2 Parámetros y valores por defecto

🧪 Aprende probando

Ejemplo Ejemplo: mixin de tarjeta Define una base y reutilízala con distintas variantes.

⌄

Ejemplo Demo interactiva: generador de mixins para botones Modifica parámetros del mixin y observa cómo cambian la variante principal y el CSS resultante.

⌄

🏁 Retos

Reto Reto: añade parámetro de sombra Extiende el mixin para aceptar $shadow y aplícalo.

⌄

🧰 Recursos

Enlaces útiles

Sass mixins Lección CSS componentes card Sass @include

Test

Comprueba tus conocimientos con un test sobre Sass.

Test de Sass

CodePen: card component pattern

Abrir en CodePen

Recursos del curso 14

🎬 Vídeos 🔗 Enlaces 🧩 Snippets

‹

Lección 03

Nesting y selector padre (&) con criterio

Lección 05

@extend y placeholders (%) sin contaminar el CSS

›