Hola Machiineros, hoy vengo a contaros algo sobre Sass que me ha encantado descubrir y quiero compartir con vosotros: el uso de los @each. Es una de esas cosas que vas viendo y sabes que están ahí, pero hasta que no tienes un poco de tiempo no te pones a probar. Ahora que lo he hecho, tengo que decir que me ha sorprendido para bien.

En Machina el equipo está creciendo, por eso estamos creando un manual de diseño de referencia para que nos ayude, tanto a los desarrolladores como a los diseñadores, y optimizar el trabajo de todo el equipo.

Los primeros días empecé a plantear las estructuras, colores y tamaños base de css, me di cuenta de que teníamos que incluir las clases básicas de ajustes que usamos en todos los proyectos. Los típicos de cambiar el padding, margen, tamaño de fuente etc.

La directiva @each es muy útil

Supongo que a muchos os habrá pasado como a mí hasta ahora, vas definiendo según los necesitas. Por ejemplo, el primer día pones ajustes para el padding bottom y tras varios días pones el ajuste para el padding top y no funciona, hasta que te das cuenta de que precisamente ese ajuste no lo incluiste. ¿Os suena?

Esta vez dediqué tiempo a investigar y he dado con una solución genial. Os voy a explicar un uso genérico que hemos creado pero que podéis aplicar a todas las configuraciones que necesitéis: alinear textos, tamaños de fuentes, ajustes de estructura, etc.

Paso1: Crear variables para cada tipo de ajuste

Primero creamos una variable con los ajustes de tamaño: Usando el primer parámetro para nombrar la clase y el segundo con el valor de css:


$SpacesSizes: (
  0: 0px,
  5: 5px
);

Ahora creamos una segunda variable con los tipos de paddings que queremos modificar: Hacemos como en la variable de los espacios, primer parámetro para nombrar la clase y el segundo con el lenguaje de css para el ajuste.


$PaddingsType: (
  pa: padding,
  pt: padding-top
);

2. Crear un bucle con @each

Ahora solo nos queda hacer un bucle para que nos recorra las dos variables y nos genere todos los estilos con todos los ajustes de tamaños.


@each $classType, $type in $PaddingsType {
  @each $classSize, $size in $SpacesSizes {
    .#{$classType}-#{$classSize} {
      #{$type}: #{$size};
    }
  }
}

Al compilar el sass nos generará esto:


.pa-0 {
  padding: 0px;
}
.pa-5 {
  padding: 5px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-5 {
  padding-top: 5px;
}

Guau!!! ¿Mola ehh? Pero sé lo que estás pensando: para dos ajustes me siento más cómodo haciéndolo como siempre, añadiendo las clases por cada tipo.

3. Añadir los ajustes que quieras actualizando la variable

Pero ¿y si quiero añadir un tamaño más? Tienes que añadir una vez el tamaño que quieras o añadir tantos tamaños como quieras. Con los @each solo tenemos que actualizar la variable y nos generará el ajuste en todas las opciones.


$SpacesSizes: (
  0: 0px,
  5: 5px,
  10: 10px
);

Y cuando se compile nos generará esto directamente:


.pa-0 {
  padding: 0px;
}
.pa-5 {
  padding: 5px;
}
.pa-10 {
  padding: 10px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-5 {
  padding-top: 5px;
}
.pt-10 {
  padding-top: 10px;
}

Si todavía no te he convencido, piensa que podemos necesitar ajustes de todos los tipos de paddings. Si los añadimos en la variable de los tipos de paddings tendremos  todos los tamaños que vayamos añadiendo.


$PaddingsType: (
  pa: padding,
  pt: padding-top,
  pr: padding-right,
  pb: padding-bottom,
  pl: padding-left
);

Y directamente los tendremos todos generados.

Si quieres luego puedes añadir otra variable con los margin y duplicando el @each para poner nuestra nueva variable nos generará todos los ajustes de tamaños que podamos necesitar en las estructuras:


$MarginsType: (
  ma: margin,
  mt: margin-top,
  mr: margin-right,
  mb: margin-bottom,
  ml: margin-left
);
@each $classType, $type in $MarginsType {
  @each $classSize, $size in $SpacesSizes {
    .#{$classType}-#{$classSize} {
      #{$type}: #{$size};
    }
  }
}

Ahora sólo te queda añadir las variables para crear tus ajustes de estructura, alineando textos y posiciones dentro del display: grid / flex, etc.

hombres de negocios animados
Al dominar la directiva @each, tú sí que molas 😉

Mola, ¿no? Si sois fans de optimizar vuestro trabajo y de generar código limpio y ordenado como nosotros, seguro que os encanta. Y si conocéis alguna forma alternativa de mejorarlo, dejadme un comentario.