Aprender a combinar selectores de Sass con el manejo de scope de variables te permite escribir hojas de estilo más limpias y mantenibles. Aquí verás cómo aplicar selectores de clase, ID y tipo, además de entender cuándo una variable es local, global o cuándo conviene usar la flag !global.

¿Qué tipos de selectores puedes usar en Sass?

Un selector define sobre qué elementos del HTML se aplican los estilos. En Sass funcionan igual que en CSS, pero ganan potencia al combinarse con variables y anidamiento.

Los tipos disponibles son:

• Selector de clase, identificado con un punto antes del nombre.
• Selector de ID, identificado con el símbolo de gato (#).
• Selector de tipo, que apunta directo a la etiqueta HTML como nav o main.
• Selector por atributo, útil cuando quieres apuntar a elementos por una propiedad específica.

¿Cuándo usar clase en lugar de ID? Por jerarquía y reutilización, las clases ganan. Un ID tiene mayor especificidad y es difícil de sobrescribir, así que reserva los ID para casos únicos y privilegia las clases para componentes que se repiten.

¿Qué es el scope de una variable en Sass?

El scope es el contexto donde una variable existe y puede usarse. En Sass hay dos tipos que conviene distinguir desde el inicio [01:00].

Variables locales y globales

Una variable local vive dentro de un bloque entre llaves y solo es accesible para los selectores anidados dentro de ese mismo bloque. Cualquier selector hijo puede leerla, pero fuera del bloque deja de existir.

Una variable global, en cambio, está disponible en cualquier parte de la hoja de estilos. Por default, todas las variables que declaras fuera de un bloque son globales, así que tienes acceso a ellas desde cualquier selector.

Shadowing y la flag global

El shadowing en Sass ocurre cuando una variable local y una global comparten nombre pero viven en distintos niveles del scope. Esto evita que modifiques por error el valor de una variable global cuando solo querías ajustar un caso puntual.

¿Para qué sirve la flag !global en Sass? Te permite cambiar el valor global de una variable desde un scope local. Es decir, si estás dentro de un bloque y necesitas que el cambio se propague a toda la hoja de estilos, agregas !global al final de la asignación.

¿Cómo aplicar selectores y variables en un proyecto real?

Para llevar la teoría al editor, parte de una estructura HTML con tres etiquetas básicas: nav, main y footer. A cada una le asignas una clase descriptiva como navbar, main-section y footer.

En tu archivo main.scss puedes mezclar enfoques según el caso:

1. Usa el selector de clase .navbar para aplicar un background-color con tu variable $primary-color.
2. Usa el selector de tipo main cuando solo existe un elemento de esa etiqueta en el documento, así evitas clases innecesarias.
3. Usa el selector de ID con #footer si decides cambiar la clase por un ID, recordando que esto sube la especificidad.

Un detalle práctico: si revisas el diseño en Figma y notas que la navbar comparte el mismo color que el background, puedes omitir esa declaración y dejar que el fondo del cuerpo haga el trabajo. Menos código, mismo resultado.

Cuándo conviene crear una variable local

Si un color solo se usará en un componente específico, como el background del footer, declara la variable dentro de ese bloque. Así mantienes el archivo de variables globales limpio y enfocado en los colores que sí se repiten en todo el proyecto.

Un ejemplo concreto: para el footer defines una variable $background con el hexadecimal traído desde Figma, y la usas únicamente dentro de ese selector. Le agregas un width del 100% y un height de 250 píxeles para visualizarlo.

Al revisar el navegador, verás que el main no aparece si no le das medidas. Es un buen recordatorio de que sin height ni contenido, un contenedor vacío simplemente colapsa.

¿Qué selectores estás usando tú en tus proyectos con Sass? Comparte en los comentarios cómo organizas tus variables locales y globales.