📘 Módulo 7: Frameworks y Preprocesadores (Sass, Tailwind, Bootstrap)

Conoce como los frameworks CSS aceleran el desarrollo. Aprende a usar procesadores como Sass para modularidad.

Objetivos

Conocer cómo los frameworks CSS aceleran el desarrollo.
Aprender a usar preprocesadores como Sass para modularidad.
Integrar Tailwind y Bootstrap en proyectos reales.
Entender ventajas y limitaciones de cada enfoque.

🔹 1. Sass (Preprocesador)

Sass permite escribir CSS más organizado y potente.

scss

// Variables
$color-primario: #003366;
$color-secundario: #ff6600;

// Nesting
nav {
  ul {
    li {
      a {
        color: $color-primario;
        &:hover {
          color: $color-secundario;
        }
      }
    }
  }
}

👉 Ventaja: modularidad, variables, mixins y funciones.

🔹 2. Tailwind CSS (Utility-first)

Tailwind ofrece clases utilitarias para aplicar estilos directamente en el HTML.

html

<button class="bg-blue-900 text-yellow-400 px-4 py-2 rounded hover:bg-blue-700">
  Botón Tailwind
</button>

👉 Ventaja: rapidez y consistencia, ideal para prototipado. 👉 Desventaja: HTML más cargado de clases.

🔹 3. Bootstrap (Framework tradicional)

Bootstrap ofrece componentes listos y un sistema de grid.

html

<div class="container">
  <div class="row">
    <div class="col-md-8">Contenido principal</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

👉 Ventaja: rápido para layouts y componentes comunes. 👉 Desventaja: menos personalizable sin sobrescribir estilos.

🔹 4. Comparación rápida

Herramienta	Ventaja principal	Limitación
Sass	Modularidad y potencia	Necesita compilación
Tailwind	Rapidez y control granular	HTML cargado de clases
Bootstrap	Componentes listos y grid	Estilos genéricos, menos flexibilidad

📝 Actividad práctica

Reescribe un bloque de tu web usando Sass con variables y nesting.
Crea un botón con Tailwind aplicando hover y colores personalizados.
Haz un layout de 2 columnas con Bootstrap y prueba su responsividad.

MÓDULO 8 CSS MODERNO