Cuando un proyecto web comienza a tomar forma, los detalles tipográficos, las variables de color y el diseño responsivo marcan la diferencia entre un resultado amateur y uno profesional. Aquí se explica cómo integrar Google Fonts mediante Sass, crear un archivo de variables reutilizables y configurar media queries para que el sitio se adapte a distintos dispositivos.
¿Cómo crear un archivo de variables en Sass?
Para mantener el código organizado y evitar repeticiones, se crea un archivo dedicado exclusivamente a las variables del proyecto. En este caso el archivo se llama vars.scss y vive junto a los demás archivos de estilos.
Dentro de él se realizan dos tareas fundamentales:
- Importar la fuente de Google Fonts usando la directiva
@import con la URL del servicio [0:43].
- Definir variables reutilizables para la tipografía y los colores principales.
El código luce así:
scss
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
$dem-font: 'Muli', sans-serif;
$main-color: #...;
La variable $dem-font almacena el nombre de la fuente Muli junto con la familia genérica sans-serif. Por otro lado, $main-color guarda el valor hexadecimal del color morado que identifica al sitio. Es importante no olvidar el símbolo hash (#) antes del valor hexadecimal, ya que sin él Sass no lo reconoce como color [1:30].
¿Cómo importar variables y aplicarlas en el archivo principal?
Una vez listo vars.scss, se importa dentro del archivo principal de estilos (app.scss) para que todas las variables estén disponibles. A diferencia del import de Google Fonts, aquí no se usa una URL, sino una ruta relativa al archivo local [2:05]:
scss
@import './vars';
body {
background: $main-color;
font-family: $dem-font;
}
Al guardar los cambios y revisar el navegador, la fuente Muli ya se aplica en todo el proyecto. Este flujo de trabajo con variables en Sass permite modificar colores o tipografías desde un solo lugar y que el cambio se refleje en todos los archivos que consuman esas variables.
¿Dónde colocar los estilos del input del buscador?
El input de búsqueda necesita estilos propios. Como pertenece al componente del buscador, sus reglas CSS se ubican dentro del archivo de estilos de ese componente, no en el archivo global. Esto respeta el principio de componentes autocontenidos: cada bloque visual maneja sus propios estilos [2:55].
¿Cómo manejar media queries en archivos separados?
Para el diseño responsivo se crea un archivo independiente llamado media.scss en la raíz de los estilos. Ahí se colocan las media queries que ajustan las secciones de main y footer en pantallas pequeñas [3:22].
scss
// media.scss
@media (max-width: 768px) {
// reglas para main y footer
}
Después se importa en app.scss de la misma forma:
scss
@import './media';
Al inspeccionar el proyecto en modo móvil desde las herramientas de desarrollo del navegador, se puede verificar que la media query surte efecto y el contenido se reorganiza correctamente [3:50].
¿Qué es el hash en las imágenes y por qué aparece?
Al inspeccionar las imágenes del proyecto en el navegador, los nombres de archivo ya no muestran su nombre original como logo, sino que incluyen un hash único generado automáticamente durante el proceso de build [4:10]. Este hash cumple una función importante: garantiza que el navegador no sirva una versión en caché obsoleta cuando la imagen cambia, ya que cada modificación produce un hash diferente.
Con la tipografía configurada, las variables centralizadas, los estilos del buscador en su componente y las media queries en un archivo dedicado, el proyecto está visualmente completo. El siguiente paso natural es conectar los datos desde una API y aprovechar React Hooks para iterar sobre los elementos recibidos. ¿Ya has trabajado con variables Sass en tus proyectos? Comparte tu experiencia en los comentarios.
