Implementando tokens de diseño con Sass

Introducción (Link permanente)

Probablemente viste el título y pensaste “Cristian, es el año del señor 20XX, ¿Por qué usaría Sass?” y puedo entender porque pensarías eso: CSS es un lenguaje que ha avanzado muchísimo y puedo ver como alguien pensaría que los preprocesadores de CSS se han vuelto obsoletos en el proceso.

Sin embargo, siguen siendo una herramienta importante en ciertas tareas. Una de estas es agilizar la implementación de tokens de diseños en este proyecto, y en este artículo te cuento cómo, pero antes probablemente te estés preguntando…

¿Qué son los tokens de diseño? (Link permanente)

Seguramente al momento de aplicar estilos a un proyecto has aplicado tokens de diseño (o design tokens en inglés) sin darte cuenta. Los tokens de diseño son la lista de decisiones que se han hecho en temas de diseño para un proyecto como el uso de colores, espaciados, tipografías, tamaños de letra, border-radius y demás.

Esto es importante para darle consistencia a un proyecto a medida que este crezca. Tal vez estés familiarizado con esto: creas un proyecto y de momento tienes ciertas elecciones de diseño definidas pero a medida que crece empiezas a agregar más y más variaciones y al final se vuelve difícil mantener la consistencia en todo lo que has creado, y para muestra un botón (o mejor dicho, botones) veamos la cantidad de elementos que tiene Steam en su sitio.

Y hey, ¡a Steam le funciona! pero es una muestra de como la consistencia puede salirse de control a medida que un proyecto escala, y por eso es bueno mantener todas esas decisiones controladas.

Como he dicho, probablemente ya hayas hecho esto antes, ya sea usando las custom properties de CSS o usando tokens de diseño ya establecidos de herramientas como Tailwind⁠ (Abre en una nueva pestaña) (que cabe aclarar que aunque tengo una opinión fuerte sobre la implementación de estos frameworks, hacen muy bien su trabajo) pero en este artículo quiero enfocarme en el uso de Sass para implementarlos de forma rápida en tu sitio.

Almacenando tokens de diseño (Link permanente)

Lo primero es organizar la estructura de tu proyecto, en mi caso yo lo que hago es que en mi carpeta con los archivos de Sass, creo una carpeta para almacenar estos tokens.

├── sass │ └── abstract │ └──── _colors.scss │ └──── _font-sizes.scss │ └── base
│ └──── _variables.scss │ └── utilities │ └──── _colors.scss │
└────_font-sizes.scss

Por fines de simplificación del tutorial voy a limitarme a solo dos categorías: colores y tamaños de fuente, pero ten en cuenta que puedes crear las categorías de tokens de diseño que necesites.

Supongamos que para este proyecto he escogido dos colores: uno principal y uno complementario, para este caso el principal es #6C9EFB que es un azul claro y para el secundario escogí #7AB565 que es un verde claro. Pero con dos colores no podemos hacer todo un sitio, así que es hora de sacar tonos de este color, para lo cual uso mdigi.tools⁠ (Abre en una nueva pestaña) . Sacaré 5 tonos de cada color y este es el resultado:

¿Por qué las tonalidades van de 100 a 500? Es una convención que se suele usar en diseño siendo 100 el color con tono más claro y a medida que avanza es más oscuro. Una vez con esta tabla, es hora de almacenarlo en el archivo _colors.scss en la carpeta abstracts. Para esto, vamos a usar un mapa de Sass.

Los mapas en Sass con una combinación de key y values, muy similar a como funciona un objeto en JavaScript. Para nuestro caso vamos a crear un mapa llamado colors que almacene nuestros colores. Esta es la sintaxis:

$colors: (
  main: (
    "100": #ccddff,
    "200": #6799fe,
    "300": #0256fd,
    "400": #013398,
    "500": #001133,
  ),
  complementary: (
    "100": #e1eedd,
    "200": #a6cd98,
    "300": #6aac53,
    "400": #406732,
    "500": #152211,
  ),
);

Los mapas de Sass empiezan con el signo de dólar seguido del nombre, luego entre paréntesis empiezas a escribir la serie de keys y values. En un mapa de Sass puedes agregar otros mapas, y estos no necesitan tener el signo de dólar al inicio, como puedes notar en esta muestra de código.

Con la tipografía es el mismo ejemplo, para este caso, decidí crear la escala tipográfica usando el método de tipografía fluida, que hace que tengas un tamaño mínimo y máximo de la fuente, y luego dependiendo del tamaño de la pantalla, la fuente irá cambiando de tamaño. Esto es muy útil para hacer fuentes totalmente responsivas al tamaño de pantalla. En este caso, usé esta calculadora hecha por Aleksandr Hovhannisyan⁠ (Abre en una nueva pestaña) y estos serán nuestros tokens de diseño. Ahora vamos a agregarlos a _font-sizes.scss.

$font-sizes: (
  "100": clamp(0.8rem, 0.15vw + 0.77rem, 0.89rem),
  "200": clamp(1rem, 0.31vw + 0.94rem, 1.19rem),
  "300": clamp(1.25rem, 0.55vw + 1.14rem, 1.58rem),
  "400": clamp(1.56rem, 0.91vw + 1.38rem, 2.11rem),
  "500": clamp(1.95rem, 1.43vw + 1.67rem, 2.81rem),
);

Y así es como podemos usar Sass para almacenar nuestros tokens de diseño, pero hay un detalle: en este momento, estos tokens están haciendo nada en nuestra hoja de estilos: al momento de compilar, estos tokens no aparecerán, así que es hora de usar estos mapas de Sass para facilitar la creación de nuestro CSS.

El método @each en Sass (Link permanente)

Una vez tenemos nuestros tokens de diseño, es hora de implementarlos en nuestro CSS. A nivel personal yo los uso de dos maneras: para crear custom properties y para crear utility classes.

Empecemos con las custom properties, primero, tenemos que importar nuestros tokens de diseño al archivo _variables.scss.

@use "../abstracts/colors" as *;
@use "../abstracts/font-sizes" as *;

Luego, dentro de este mismo archivo, llamaremos al mapa dentro de _font-sizes.scss y vamos a recorrer este mapa usando el método @each de Sass:

:root {
  @each $key, $item in $font-sizes {
    --fs-#{$key}: #{$item};
  }
}

Revisemos este método, @each nos permite recorrer un grupo de valores, en este caso, nuestro mapa. Como nuestro mapa tiene una combinación de keys y values, tenemos que declarar que queremos recorrer ambos elementos con $key, $item. Por último, tenemos que declarar qué elemento queremos revisar, por lo que agregamos in $font-sizes. Si quieres entender un poco más como funciona este método de Sass, puedes revisar la documentación de Sass sobre @each⁠ (Abre en una nueva pestaña) .

Con esto claro, es hora de agregar las reglas de CSS que queremos crear. En este caso, crear custom properties por cada valor en nuestro mapa. fs es la abreviatura que decidí usar para font-size y queremos que cada una de estas tenga el nombre que agregamos como key en nuestro mapa, para eso tenemos que interpolarlo usando la sintaxis de #{$key}, de otro modo, no será renderizado como cadena de texto.

Finalmente, necesitamos llamar al value como el valor de nuestra custom property, por lo que escribimos #{$item} . Ya con esto, una vez compilemos nuestro CSS, este será nuestro resultado:

:root {
  --fs-100: clamp(0.8rem, 0.15vw + 0.77rem, 0.89rem);
  --fs-200: clamp(1rem, 0.31vw + 0.94rem, 1.19rem);
  --fs-300: clamp(1.25rem, 0.55vw + 1.14rem, 1.58rem);
  --fs-400: clamp(1.56rem, 0.91vw + 1.38rem, 2.11rem);
  --fs-500: clamp(1.95rem, 1.43vw + 1.67rem, 2.81rem);
}

Y aquí es donde reside la magia de Sass, este trabajo de convertir tokens de diseño a algo que podamos usar con CSS se vuelve muy fácil. Y más importante aun: si tenemos que añadir o directamente cambiar nuestros tokens de diseño, solo cambiamos el contenido de los mapas y ya todo el trabajo se hará en la próxima compilación.

Ahora veamos como hacer este mismo proceso con nuestro mapa de colores. Este es ligeramente distinto, porque tenemos que recorrer cada mapa que está dentro del mapa inicial, lo que significa que es un @each anidado.

@each $key, $item in $colors {
  @each $shade, $color in $item {
    --clr-#{$key}-#{$shade}: #{$color};
  }
}

Lo que nos generaría esto como resultado en nuestro CSS una vez compilado:

:root {
  --clr-main-100: #ccddff;
  --clr-main-200: #6799fe;
  --clr-main-300: #0256fd;
  --clr-main-400: #013398;
  --clr-main-500: #001133;
  --clr-complementary-100: #e1eedd;
  --clr-complementary-200: #a6cd98;
  --clr-complementary-300: #6aac53;
  --clr-complementary-400: #406732;
  --clr-complementary-500: #152211;
}

Pero la utilidad de Sass no termina aquí. ¿Recuerdas cuando hablé de Tailwind? Bien, Tailwind usa sus tokens de diseño no a través de custom properties si no a través de utility classes: el uso de clases que agrega una funcionalidad en específica. También podemos hacer esto con Sass. Para eso nos vamos a ir a la carpeta utilities y vamos a crear clases con base a nuestros tamaños de fuente en _font-sizes.scss.

@use "../abstracts/font-sizes" as *;

@each $key, $item in $font-sizes {
  .fs-#{$key} {
    font-size: var(--fs-#{$key});
  }
}

A pesar de que en este caso no estamos usando el value, es necesario agregarlo porque de otro modo nuestro CSS no compilará. Aquí lo que estamos haciendo es relacionar las custom properties que hemos creado con la propiedad font-size para crear estas clases. Este sería el resultado una vez compilado.

.fs-100 {
  font-size: var(--fs-100);
}

.fs-200 {
  font-size: var(--fs-200);
}

.fs-300 {
  font-size: var(--fs-300);
}

.fs-400 {
  font-size: var(--fs-400);
}

.fs-500 {
  font-size: var(--fs-500);
}

Ahora, vamos a crear lo mismo con los colores en nuestros tokens de diseño. Para este caso, vamos a crear dos tipos de utility classes: una para el color de texto y otra para el background. Así luciría nuestra función en Sass.

@use "../abstracts/colors" as *;

@each $key, $item in $colors {
  @each $shade, $color in $item {
    .bg-#{$key}-#{$shade} {
      background-color: var(--clr-#{$key}-#{$shade});
    }

    .text-#{$key}-#{$shade} {
      color: var(--clr-#{$key}-#{$shade});
    }
  }
}

Mostraría el compilado en este caso pero serían 20 reglas de CSS de temas repetitivos y creo que en este punto del artículo, ver como se vería compilado podría sentirse redundante.

¿Vale la pena usar Sass? (Link permanente)

Tal vez estés usando otras herramientas para tus tokens de diseño, o tal vez uses un framework externo (como Tailwind) y entre tantas herramientas del desarrollo web moderno tal vez te preguntes si vale la pena usar Sass, y como todo en esta industria, la respuesta es: depende.

Yo personalmente lo encuentro útil en los proyectos que uso, pero ten en mente que al menos en los que hago a nivel personal, no suelo usar frameworks de Front-End como React. Yo suelo decantarme por herramientas más “vanilla” o últimamente, con generadores de sitios estáticos como Eleventy.

Probablemente no sea tu caso y probablemente en tu proyecto usen otras herramientas, pero incluso en los frameworks de Front-End modernos sigue siendo útil. En mi trabajo actual, usamos Sass en conjunto con React y CSS Modules precisamente por como nos facilita crear tokens de diseño. Luego solo documentamos las utility classes que creamos en Storybook y las empezamos a usar en componentes y es algo que a mi equipo le funciona bien, pero tal vez no sea tu caso, tal vez uses otras herramientas de CSS-in-JS que hacen a Sass redundante, y esto está bien.

Lo importante es analizar lo que la herramienta que escojas trae a la mesa, y en mi caso personal, el permitirme organizar mis archivos CSS y la facilidad que me genera para crear mis estilos con base a los tokens de diseño que he escogido hacen que Sass sea mi elección principal al momento de crear un proyecto.

Para terminar (Link permanente)

A pesar de que sí, los preprocesadores de CSS son herramientas que tal vez no sean tan necesarias como lo eran hace unos años, pero siguen siendo útiles en el desarrollo moderno. Tal vez sea momento de dale una oportunidad ¿Quién sabe? tal vez te encuentres con una herramienta que te facilite mucho la creación de estilos en tu proyecto.

Sin más que decir, recuerden que pueden seguirme en mi cuenta de Twitter⁠ (Abre en una nueva pestaña) . ¡Hasta la próxima vez!