Proyecto Tema 3: Preprocesadores SASS y Less

Descripción de la actividad

En este proyecto se ha llevado a cabo la refactorización completa de la web desarrollada en la unidad anterior, sustituyendo el CSS tradicional por el uso de SASS (SCSS) como preprocesador.

El objetivo principal es mejorar la calidad del código, haciéndolo más mantenible, escalable y profesional, siguiendo buenas prácticas de desarrollo frontend.

Objetivos del proyecto

• Trabajo en grupo de 2–3 personas.
• Reutilizar el HTML del proyecto del Tema 1.
• Crear al menos una página por alumno.
• No reutilizar directamente el CSS anterior.

Conceptos trabajados

El proyecto permite demostrar el dominio de SASS como preprocesador, aplicando correctamente los siguientes conceptos:

• Uso de SASS (SCSS).
• Aplicación del principio DRY.
• Organización del código en partials.
• Variables.
• Anidamiento y uso correcto de &.
• @import y @use.
• Mixins reutilizables.
• @extend con uso justificado.
• Funciones y operadores de SASS.
• Compilación correcta de SCSS a CSS.

Estructura del proyecto

proyecto-sass/     
├── index.html
├── carrito.html
├── paginaUsuario.html
│
├── scss/
│   ├── base/
│   │   ├── _reset.scss
│   │   ├── _variables.scss
│   │   └── _tipografia.scss
│   │
│   ├── layout/
│   │   ├── _header.scss
│   │   ├── _footer.scss
│   │   └── _grid.scss
│   │
│   ├── components/
│   │   ├── _buttons.scss
│   │   ├── _cards.scss
│   │   └── _forms.scss
│   │
│   ├── pages/
│   │   ├── index.scss
│   │   └── carrito.scss
│   │
│   └── main.scss
│
├── css/
│   ├── main.css
│   └── carrito.css
│
└── README.md

Requisitos técnicos

• Variables para colores, tipografías, espaciados y breakpoints.
• Anidamiento en navegación y componentes.
• Mixins para botones, media queries y reglas reutilizables.
• Uso correcto de @extend.
• Uso de funciones y operadores aritméticos.
• Archivo principal main.scss con imports ordenados.
• CSS generado sin errores.

README del proyecto

El proyecto incluye un archivo README.md donde se especifica:

• Integrantes del grupo.
• Estructura del proyecto.
• Cambios respecto a usar CSS.
• Ventajas del uso de SASS.

Restricciones aplicadas

• No se han utilizado frameworks CSS.
• No se ha escrito CSS manualmente en main.css.
• No se han duplicado reglas sin usar mixins o extend.

Valor añadido

• Mejor organización del código.
• Base preparada para futuras ampliaciones.
• Uso de @use en lugar de @import.
• Preparación para sistema de temas o dark mode.