📄 Enunciado del ejercicio
En este ejercicio se trabaja el uso de mixins en SCSS, una de las herramientas más potentes de los preprocesadores CSS. El objetivo es crear un mixin reutilizable para estilos de botones y aplicarlo a distintos tipos de botones con pequeñas variaciones.
El mixin debe llamarse boton y aceptar varios parámetros con
valores por defecto:
- Color de fondo
- Color del texto
- Padding
- Radio de borde
🛠️ Creación del mixin
El mixin centraliza todas las propiedades comunes de los botones, como el color del texto, el padding, el borde redondeado y el comportamiento del cursor. Gracias a los valores por defecto, no es necesario indicar todos los parámetros cada vez que se utiliza.
Esto permite aplicar el principio DRY (Don’t Repeat Yourself), evitando duplicar código y facilitando el mantenimiento del proyecto.
🚀 Uso del mixin con @include
A partir del mixin se crean tres botones distintos utilizando
@include:
- Botón primario: utiliza todos los valores por defecto del mixin.
- Botón secundario: modifica únicamente el color de fondo.
- Botón de alerta: cambia el color de fondo y el padding para destacar visualmente su función.
De esta forma, todos los botones mantienen una coherencia visual, pero pueden diferenciarse fácilmente según su función.
✨ Ventajas del uso de mixins
El uso de mixins aporta múltiples beneficios al desarrollo de estilos:
- Mayor reutilización de código.
- Estilos más limpios y organizados.
- Facilidad para realizar cambios globales.
- Mejor escalabilidad del proyecto.
🤔 Pregunta de reflexión
¿Qué pasaría si necesitara cambiar el estilo de todos los botones?
Gracias al uso del mixin, solo sería necesario modificar el mixin
boton. Automáticamente, todos los botones que lo utilicen
heredarían los cambios sin tener que modificar cada clase de forma
individual.
📝 Conclusión
Este ejercicio demuestra cómo los mixins convierten SCSS en una herramienta mucho más potente que CSS tradicional. Permiten escribir código más mantenible, profesional y preparado para proyectos de mayor tamaño.