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.

Mixin de botón reusable

@mixin button($bg, $fg: #fff, $radius: 10px) {
  background: $bg;
  color: $fg;
  border: 0;
  border-radius: $radius;
  padding: .625rem 1rem;
  font-weight: 700;
}

.btn-primary {
  @include button(#2563eb);
}

.btn-ghost {
  @include button(transparent, #1e293b, 8px);
  border: 1px solid #cbd5e1;
}

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.

⌄