Introducción a CSS y SCSS

¿Qué es CSS?
- CSS (Cascading Style Sheets) permite a los desarrolladores aplicar estilos (como colores, fuentes, espaciado) a documentos web.
- Se usa junto con HTML para controlar cómo se muestra el contenido en los navegadores web.
¿Por qué es importante CSS?
- Separa el contenido (HTML) de la presentación (estilos), lo que mejora la accesibilidad y la mantenibilidad del código.
- Permite la creación de páginas web responsivas que funcionan en una amplia gama de dispositivos y tamaños de pantalla.
Conceptos básicos de CSS
- Selectores, propiedades y valores.
- La cascada y la herencia.
- El modelo de caja (box model).
Ejemplos prácticos
- Aplicar estilos a elementos HTML usando selectores de etiqueta, clase e ID.
- Crear un layout básico con CSS (como un encabezado, una barra de navegación y un pie de página).

¿Qué es SCSS?
- SCSS es una extensión de CSS que permite usar características que no están disponibles en CSS puro, como variables, mixins, y herencia, para escribir estilos de manera más eficiente y con menos repetición.
¿Por qué SCSS?
- Facilita la organización y mantenimiento de grandes hojas de estilo.
- Introduce lógica en las hojas de estilo (por ejemplo, condiciones y bucles).
Conceptos básicos de SCSS
- Variables para almacenar colores, fuentes y otros valores reutilizables.
- Anidación para reflejar la estructura HTML y simplificar los selectores.
- Mixins y funciones para reutilizar bloques de estilos.
Ejemplos prácticos
- Convertir un fragmento de CSS a SCSS para demostrar la sintaxis y las características adicionales.
- Crear un pequeño proyecto (como un botón con estilos dinámicos) utilizando SCSS.

Introducir herramientas necesarias para trabajar con SCSS (como compiladores que convierten SCSS a CSS).
Explicar el flujo de trabajo típico al desarrollar con SCSS, incluyendo la organización de archivos y la compilación.