Aprender Sass te permite escribir estilos más limpios, reutilizables y mantenibles en tus proyectos web. Si ya manejas HTML y CSS básicos, este preprocesador es el siguiente paso para escalar tus habilidades como front-end developer y construir proyectos reales como una landing page profesional.

A lo largo del recorrido vas a desarrollar Eco Store, una landing page que muestra un catálogo digital de productos ecológicos para hogar, skincare e higiene. Ahí aplicarás variables, mixins, selectores anidados y herencia.

¿Qué es Sass y por qué se usa como preprocesador de CSS?

Sass, acrónimo de Syntactically Awesome Stylesheet, es un preprocesador de CSS que añade funcionalidades que el CSS tradicional no tiene. A diferencia de otros preprocesadores basados en JavaScript, Sass está construido sobre Ruby [1:18].

La idea es simple: escribes en una sintaxis extendida y Sass la compila a CSS estándar que el navegador entiende. Eso te ahorra tiempo, evita repetición y hace tu código mucho más mantenible.

¿Qué diferencia a Sass del CSS normal? Sass añade variables, mixins, anidación de selectores, herencia y modularización. CSS normal no tiene estas funcionalidades nativas con la misma flexibilidad.

¿Cuáles son las características principales de Sass?

Sass trae varias herramientas que cambian la forma en que estructuras tus hojas de estilo. Cada una resuelve un problema concreto del CSS tradicional.

• Modularización con la regla use: te permite dividir tus estilos en archivos separados e importarlos donde los necesites.
• Variables: almacenan datos como colores, fuentes o tamaños. Si cambias el valor una vez, se actualiza en todo el proyecto.
• Mixins: funcionan parecido a funciones porque reciben parámetros de entrada y devuelven bloques de estilos reutilizables [2:05].
• Selectores anidados: te dejan escribir jerarquías de estilos de forma más legible y mantenible.
• Herencia: permite compartir estilos entre selectores sin duplicar código.

Cada una de estas piezas la vas a aplicar dentro del proyecto, así que no son conceptos sueltos.

¿Cuál es la diferencia entre archivos .sass y .scss?

Sass es flexible y compatible con CSS normal, así que puedes elegir entre dos extensiones según tu preferencia de sintaxis [2:35].

Sintaxis .scss

Es la más cercana al CSS tradicional. Usa llaves para delimitar bloques y punto y coma al cerrar cada declaración. Si vienes de CSS, te vas a sentir en casa desde la primera línea.

Sintaxis .sass

Usa una sintaxis identada, sin llaves ni punto y coma. La estructura depende de la indentación, parecida a Python. Es más limpia visualmente, pero exige disciplina con los espacios.

¿Cuál sintaxis de Sass debo elegir? Si vienes de CSS, usa .scss porque mantiene llaves y punto y coma. Si prefieres código minimalista basado en indentación, usa .sass.

¿Qué vas a construir con el proyecto Eco Store?

Eco Store es una landing page que presenta un catálogo de productos ecológicos. El diseño está maquetado en Figma, software donde puedes prototipar interfaces antes de codear [4:30].

El archivo de Figma incluye íconos rellenos y de línea de uso libre, una paleta de colores personalizada y la tipografía IBM Plex Sans en tres variantes: medium, regular y bold [5:15].

Cómo se estructura la navbar y el hero

La navbar combina el logotipo de texto Eco Store con tres íconos funcionales: perfil de usuario, wishlist y carrito de compras. La sección principal incluye una descripción sobre impacto ecológico, un botón call to action hacia Conoce más y una imagen representativa.

Las secciones de Skincare y Furniture

Cada sección está construida con cartitas que contienen una imagen del producto, un ícono para agregar a la wishlist, el título y una descripción corta. Todas mantienen el mismo espaciado en eje X y eje Y, lo que se logra con flexbox. La diferencia entre Skincare y Furniture está en el color de las cartitas y del texto.

Por qué nosotros, galería, mapa y footer

La sección Por qué nosotros usa dos divs alineados con flexbox. La galería incluye una pequeña animación y mantiene el espaciado uniforme entre elementos. El mapa muestra la dirección física de la tienda con una imagen principal. El footer cierra con íconos de redes sociales, logotipo y links a términos, condiciones o careers.

¿Qué encabezados y tipografías se usan en el diseño?

La jerarquía tipográfica organiza la lectura de la página. El encabezado más grande corresponde a un H1, mientras que los títulos de sección usan H2 y H3 de forma consistente [7:50].

La tipografía cambia según el peso: negritas para énfasis fuerte, regular para texto base y medium para subtítulos intermedios. Esa variación crea contraste visual sin saturar el diseño.

El Figma del proyecto también incluye la versión responsiva, así que vale la pena explorarlo antes de empezar a codear. ¿Ya revisaste tu paleta de colores y tienes lista tu carpeta de trabajo? Cuéntame en los comentarios qué parte del proyecto te emociona más construir.