Tarea: Introducción a SASS/SCSS en tu proyecto React

🎯 Objetivo

Aprender a utilizar SASS (SCSS) como preprocesador de CSS en tu proyecto de e-commerce con React. Comprender su utilidad, aplicarlo en la práctica y documentar lo aprendido.

---

📌 Parte 1 – Investigación guiada

A partir de las diapositivas introductorias entregadas, realiza una pequeña investigación para ampliar información sobre:

• ¿Qué es SASS/SCSS?
• ¿Qué ventajas tiene respecto a CSS tradicional?
• ¿Cómo se instala y se configura en un proyecto React (con Vite)?
• ¿Qué son y cómo se usan?
  • Variables
  • Anidación
  • Mixins
  • Partials y archivos parciales (_nombre.scss)
  • @import vs @use (básico)

---

📌 Parte 2 – Implementación práctica

1. Instala SASS en tu proyecto React:

   npm install sass

2. Convierte al menos 2 archivos .css a .scss. Reescribe los estilos utilizando:

   • ✅ Variables (colores, tipografías, tamaños)
   • ✅ Anidación
   • ✅ Al menos un @mixin o @function

3. Importa los archivos .scss en los componentes correspondientes.

4. Verifica que todo siga funcionando correctamente en la app.

---

📌 Parte 3 – Estructura del sistema de estilos

📁 Organiza tus estilos usando una carpeta /styles como se indica:

/src
  /styles
    _variables.scss
    _mixins.scss
    _base.scss
    main.scss

• En main.scss importa los otros archivos con @use o @import.
• Puedes importar main.scss en tu App.jsx para aplicar estilos globales.

---

📌 Parte 4 – Mini documentación (entrega)

Crea un archivo llamado SASS-explicacion.md dentro del proyecto con los siguientes puntos:

• ¿Qué es SASS/SCSS?
• ¿Cómo lo has instalado y configurado?
• ¿Qué elementos nuevos has usado (variables, mixins, etc.)?
• ¿Qué parte del proyecto has modificado?
• ¿Qué has aprendido?
• ¿Dificultades encontradas? ¿Qué buscarías la próxima vez?

---

🚀 Bonus extra (elige uno de estos para sumar puntos):

Opción A: Crea un tema oscuro y claro usando variables SCSS. Simula un modo oscuro con dos sets de colores en variables, y cambia manualmente la importación para probarlos.

Opción B: Crea un sistema de breakpoints con mixins (@mixin responsive) y aplícalo en al menos un componente (por ejemplo, para móvil).

Opción C: Investiga y usa anidación con pseudo-elementos o pseudo-clases (:hover, ::before) usando SCSS.

---

✅ Requisitos mínimos para aprobar

• Investigación completada
• SASS instalado en el proyecto
• Al menos 2 archivos .scss con variables, mixins y anidación
• Estructura /styles con partials y main.scss
• Archivo SASS-explicacion.md completo
• Funcionamiento correcto en React

---

📦 Entrega

Sube tu proyecto a GitHub con los cambios aplicados y el archivo de explicación.

📁 /src
   📁 /styles
   📄 SASS-explicacion.md

Incluye el enlace al repositorio en la plataforma de entrega o entrégalo según se indique.