Las variables en Sass son espacios de memoria que almacenan un dato y permiten reutilizar valores como colores o tipografías en toda tu hoja de estilos. Aprenderás a declararlas, diferenciarlas de las variables CSS y aplicarlas en un proyecto real con Figma y Visual Studio Code. Es ideal si ya escribes CSS y quieres dar el salto a un flujo más ordenado y mantenible.

Cómo se estructura una hoja de estilos en Sass

Una hoja de estilos en Sass se construye con statements o declaraciones que siguen un orden específico. Algunos contienen bloques delimitados por llaves y se separan con punto y coma.

Hay dos grandes grupos que conviene distinguir desde el inicio:

• Top-level statements: solo pueden ir en la parte superior del archivo. Aquí entran los @import, la definición de un mixin, la definición de una función o el uso de un módulo.
• Universal statements: pueden aparecer en cualquier parte del documento. Incluyen variables, estructuras de control, reglas como @error, @warn o @debug, declaraciones de CSS, reglas de estilos, at rules y mixins.

Esta jerarquía importa porque define dónde puedes colocar cada pieza sin romper la compilación [00:35].

Qué es una variable en Sass y cómo se declara

Una variable es un espacio asignado en memoria que almacena un único dato. En Sass puedes declararla en cualquier parte de la hoja de estilos, y para hacerlo necesitas el símbolo de pesos $ antes del nombre [01:25].

Un ejemplo directo con tres colores:

scss $primary-color: blue; $secondary-color: green; $tertiary-color: purple;

Ese $ es lo que te permite referenciar la variable más adelante en cualquier regla de estilos.

¿Cómo se declara una variable en Sass? Escribe el símbolo $, el nombre de la variable, dos puntos y el valor. Cierra con punto y coma. Ejemplo: $primary-color: blue;.

En qué se diferencian las variables de Sass y las de CSS

Aunque parezcan equivalentes, las variables de Sass y las de CSS funcionan distinto y eso cambia cómo las usas en un proyecto.

• Las variables de CSS son declarativas y pueden tener diferentes valores para distintos elementos.
• Las variables de Sass son imperativas y guardan un valor único por elemento. Si actualizas el valor, cambia en automático donde se haya usado.

Sass también incluye una flag llamada !default. Esta asigna un valor a la variable solo si aún no ha sido definida o si su valor actual es null. Es útil cuando creas librerías y quieres dar valores por defecto que el usuario pueda sobrescribir [02:45].

¿Para qué sirve !default en Sass? Asigna un valor a una variable únicamente si no ha sido definida antes o si es null. Permite definir defaults sin pisar configuraciones existentes.

Cómo definir la paleta de colores desde Figma

Antes de escribir código, conviene revisar la paleta en Figma para decidir qué colores merecen ser variables. La regla práctica: si un color se repite mucho, vale la pena guardarlo; si aparece una sola vez, no.

En el proyecto de ejemplo se identifican estos colores:

• Un blanco amarillento que aparece en toda la página, ideal como color primario.
• Un tono que se repite en las cards, candidato a color secundario.
• Un verde usado en los títulos, que entra como color terciario.
• Un naranja que aparece muy pocas veces y que no se convierte en variable porque su uso es marginal.

Este filtro evita inflar el archivo con variables que nadie va a reutilizar.

Cómo crear variables de color y tipografía en Visual Studio Code

La buena práctica es declarar las variables al inicio del archivo cuando se usan en todo el proyecto. Si el uso es local, también puedes declararlas dentro del bloque correspondiente.

Partiendo de los hexadecimales copiados desde Figma, la estructura queda así:

scss $primary-color: #f5f3e7; $secondary-color: #d9d2b6; $tertiary-color: #4a6b3a; $primary-text-color: #2b2b2b; $font-stack: 'IBM Plex Sans', sans-serif;

Nota un detalle importante: el cuarto color no se llama quaternary-color, sino $primary-text-color, porque su función real es dar color a los textos. Nombrar variables por su uso, no por su orden, hace el código más legible.

Cómo integrar la tipografía con Google Fonts

Para la tipografía se eligió IBM Plex Sans en tres pesos: regular, medium y bold. El flujo es directo:

1. Buscar la fuente en Google Fonts y seleccionar los estilos.
2. Copiar los <link> que entrega Google Fonts y pegarlos en el archivo HTML.
3. Copiar la regla font-family sugerida y guardarla en la variable $font-stack dentro del archivo Sass.

Con eso ya puedes referenciar $font-stack en cualquier selector sin repetir el nombre de la fuente [06:30].

Por qué resetear margin y padding desde el inicio

Un paso pequeño que ahorra horas de depuración: resetear los estilos base.

scss

• { margin: 0; padding: 0; }

Esto elimina los margin y padding que los navegadores aplican por defecto y que muchas veces aparecen sin que sepas de dónde vienen. Empezar con el lienzo limpio te da control total sobre el espaciado [07:45].

¿Y si necesitas colores específicos para una sección puntual sin contaminar el alcance global? Ahí entran las variables locales, que se trabajan en la siguiente clase. ¿Qué color crees que merece ser local en tu propio proyecto? Cuéntalo en los comentarios.