📄 Enunciado del ejercicio
En este ejercicio se trabaja el uso de @extend en SCSS, una funcionalidad que permite heredar estilos de un selector base para evitar duplicar código.
El objetivo es crear una clase base que defina el estilo común de los botones y, a partir de ella, generar distintos tipos de botones cambiando únicamente el color de fondo.
🛠️ Creación del selector base
Se define un selector llamado .boton-base que contiene todas
las propiedades comunes a los botones:
- Padding uniforme
- Esquinas redondeadas
- Color de texto blanco
- Eliminación del borde
- Cambio del cursor al pasar el ratón
Este selector no se utiliza directamente en el HTML, sino que sirve como base para que otros selectores hereden sus estilos.
🚀 Extensión del selector con @extend
A partir de .boton-base se crean tres botones distintos usando
@extend:
- .boton-primario con fondo azul.
- .boton-secundario con fondo verde.
- .boton-alerta con fondo rojo.
Cada uno de estos selectores hereda automáticamente todas las propiedades del selector base y solo define su color de fondo específico.
✨ Ventajas de usar @extend
El uso de @extend aporta varias ventajas importantes:
- Evita repetir reglas CSS.
- Reduce el tamaño del CSS generado.
- Mantiene una estructura clara y coherente.
- Facilita el mantenimiento del código.
🤔 Pregunta de reflexión
¿Qué diferencia hay entre usar @extend y usar un @mixin con @include para estos botones? ¿Cuál genera menos código?
La principal diferencia es que @extend combina los selectores
que comparten estilos en una misma regla CSS, mientras que los
@mixin copian las propiedades cada vez que se incluyen.
Por ello, @extend suele generar menos código CSS, ya que no repite las mismas reglas varias veces. Sin embargo, los mixins son más flexibles cuando se necesitan variaciones en los valores.
📝 Conclusión
Este ejercicio demuestra cómo @extend es una excelente opción
para crear estilos base compartidos. Usado correctamente, permite escribir
un código más limpio, optimizado y fácil de mantener, especialmente cuando
varios elementos comparten la misma estructura visual.