Cerrar un proyecto web con Sass implica algo más que escribir estilos: requiere pensar en jerarquía visual, semántica HTML y reutilización de código. Aquí aprenderás a construir la sección de location con un mapa estático y un footer con redes sociales, aplicando mixins, variables locales y selectores compartidos para mantener tu código limpio y escalable.

Cómo estructurar la sección de location con HTML semántico

La sección del mapa parte de una estructura sencilla pero pensada para SEO y accesibilidad. Dentro del Figma, el diseño contempla un título principal, una imagen del mapa y la dirección del lugar.

En el HTML usamos un H2 para el título principal encuéntranos en y un H3 para la dirección específica. Esta jerarquía importa porque los motores de búsqueda interpretan la estructura de encabezados como pistas sobre el contenido.

¿Por qué usar una imagen en vez de la API de Google Maps? Porque no exige conocimientos de consumo de APIs y permite enfocarte en el aprendizaje de Sass. Si ya manejas APIs, puedes implementar la versión interactiva.

La imagen del mapa se carga desde la carpeta assets/image, manteniendo una organización clara de recursos estáticos.

Cómo aplicar mixins y variables locales en Sass

Dentro del archivo de estilos, después de la sección gallery y antes del footer, se declara la clase .location. La clase interna .mapa recibe las propiedades de centrado mediante un @include del mixin flex-center, pasando los parámetros para fila, centrado horizontal y vertical.

Para separar la imagen del texto de dirección, se aplica un padding-bottom de 50 píxeles. El color del H3 se gestiona con una variable local llamada text-color, que se reutiliza dentro del mismo bloque. Este enfoque mantiene los valores encapsulados sin contaminar el alcance global de variables.

scss .location { $text-color: #valor; .mapa { @include flex-center(row, center, center); img { padding-bottom: 50px; } } h3 { color: $text-color; } }

Cómo compartir estilos entre selectores con una coma

Uno de los detalles más útiles aparece al ajustar tipografías. El H2 y el H3 necesitan el mismo font-size proveniente de la variable paragraph-size. En lugar de duplicar las reglas, se separan los selectores con una coma para compartir estilos.

Esta técnica reduce líneas de código y facilita el mantenimiento. Si mañana cambias el tamaño tipográfico, lo haces en un solo lugar.

Cómo construir un footer con redes sociales en Sass

El footer concentra el logotipo Eco Store, enlaces de información corporativa e iconos de redes sociales. Su estructura visual debe ser limpia y respirar lo suficiente para no sentirse comprimida.

El height del footer se deja en automático: crece según los elementos que contenga. El color del texto interno se define en blanco para contrastar con el fondo oscuro predeterminado.

¿Qué información incluir en un footer? Datos de la empresa, enlaces legales como terms and conditions, secciones como careers y la razón social. Por ejemplo: Eco Store Inc.

Dentro del footer se crea una sección con la clase social-media que agrupa los iconos de Instagram, Facebook y Twitter, importados desde assets/image.

Cómo aplicar padding y gap para mejorar la legibilidad

Los elementos del footer aparecen muy pegados por defecto, lo que afecta la lectura. Para resolverlo, se aplica un padding de 40 píxeles al contenedor general y un gap de 40 píxeles entre elementos hijos, generando espaciado tanto en el eje X como en el eje Y.

La clase social-media reutiliza el mixin flex-center para alinear los tres iconos horizontalmente. Un padding-bottom adicional separa visualmente el bloque de redes sociales del resto del contenido.

• Padding general del footer: 40 píxeles.
• Gap entre elementos: 40 píxeles.
• Padding bottom para separación: 40 píxeles.

Estos valores son consistentes con los del resto del proyecto, lo que aporta ritmo visual al diseño.

Cómo decidir entre centrado y alineación con el título

Un dilema común aparece al posicionar el texto de la dirección: ¿alinearlo al borde izquierdo de la imagen o centrarlo junto con ella? La opción que predomina en este proyecto deja el mapa centrado y los textos alineados con el título principal.

La razón es estética y funcional: el contenido textual gana protagonismo cuando se alinea con la jerarquía superior, mientras que el mapa funciona como un bloque visual independiente.

Probar con padding-left de 120 píxeles fue una opción inicial, pero al detectar que el alineamiento dependía del ancho de la imagen, se descartó en favor del centrado natural del contenedor flex.

¿Implementaste tu propia versión con la API de mapas? Cuéntame en los comentarios cómo resolviste la integración y qué retos encontraste con Sass.