SCSS Utilities: menos tiempo para escribir tus estilos

June 2020

Desde la introducción de las hojas de estilo (CSS) como estándar en la industria Web para dar formato al contenido, los desarrolladores front-end se han enfrentado a la repetición de código y a la necesidad de crear estilos limpios y con la menor cantidad de líneas de código posibles.

En las primeras etapas de CSS esta era una tarea demorada y el mantenimiento de la capa de presentación de una Web siempre fue complicado. En muchos casos se tenían que crear parches para nuevos elementos, crear hojas de estilo independientes para secciones nuevas e infinidad de soluciones poco satisfactorias las cuales llevaban a un incremento en la cantidad de código y, por ende, a mayores tiempos de carga del sitio Web.

La llegada de los pre procesadores de CSS ha significado un cambio importante en la forma como se escriben las hojas de estilo, de igual forma han sido herramientas significativas en la reducción de tiempo de desarrollo ya que permiten agilizar la escritura de estilos.

Tomemos como ejemplo la definición de colores para un sitio web, digamos que tenemos 3 colores principales: verde (#1ECAB8), azul (#4D79F5) y naranja (#F4C64D). La forma usual de definir los colores en CSS es aplicar el color directamente a un elemento o crear una clase para cada uno de los colores y luego aplicar esta clase al elemento:

.texto-verde {
  color: #1ECAB8
}
.fondo-verde {
  background-color: #1ECAB8
}
.texto-azul {
  color: #4D79F5
}
.fondo-azul {
  background-color: #4D79F5
}
.texto-naranja {
  color: #F4C64D
}
.fondo-naranja {
  background-color: #F4C64D
}

Una vez creados los estilos, vamos a aplicarlos a los elementos:

<div class="fondo-verde">
	<p class="texto-azul"></p>
</div>

Preprocesadores

En SCSS tenemos la posibilidad de crear variables, mapas y @mixin (entre muchos otros elementos). Vamos a lo primero. Las variables definen elementos puntuales que se pueden usar a lo largo del CSS y que afectarán a todo elemento que lo incluya; así, podemos definir nuestros colores de esta forma:

$verde: #1ECAB8;
$azul: #4D79F5;
$naranja: #F4C64D

Pero aún así, tendríamos que escribir cada una de las líneas de código para definir color de texto y color de fondo, lo cual no hace mayor diferencia con el ejemplo anterior. Acá es donde los mapas y @mixin entran en juego para hacernos la vida más sencilla.

Los mapas son porciones de código con asociaciones entre llaves y valores, como un arreglo, entonces podemos tener una variable que contenga una serie de valores los cuales podemos recorrer. De esta forma, nuestra definición de colores se convierte en esto:

$colores: (
  verde: #1ECAB8,
  azul: #4D79F5,
  naranja: #F4C64D
);

Como vemos, este mapa guarda una colección de datos que podemos recorrer con @each, la ventaja que tienen los mapas radica en que nos permiten referenciar su contenido a través del nombre, lo que los hace ideales para agrupar información referenciada de forma lógica.

Vamos a poner un poco de lógica

Los @mixin permiten definir estilos que se van a usar una y otra vez en el código (entre otras cosas). Ahora que los colores se encuentran dentro de un mapa, los podemos recorrer con @each dentro de un @mixin, por ejemplo de esta manera:

@mixin modificador-colores {
  @each $nombre, $valor-hex in $colores {
    // acción
  }
}

así, creamos un @mixin llamado modificador-colores en el que, a través de @each, vamos a recorrer el mapa $colores y en cada una de las iteraciones vamos a asignar el nombre del color en la variable $nombre y el valor del color en la variable $valor-hex. Desarrollemos el contenido de @each

@mixin modificador-colores {
  @each $nombre, $valor-hex in $colores {
    &-#{$nombre} {
      color: $hex;
    }
  }
}

para usar nuestro @mixin sólo debemos llamarlo dentro de una clase

.texto {
  @include modificador-colores;
}

lo que daría como resultado

.texto-verde {
  color: #1ECAB8;
}
.texto-azul {
  color: #4D79F5;
}
.texto-rojo {
  color: #F4C64D;
}

Pero claro, el @mixin está limitado a crear colores para el texto, pero ¿qué pasa si queremos los mismos colores para el fondo? Pues bien, el ejemplo de @mixin que acabamos de ver es sólo una pequeña muestra del poder de este elemento en la creación de utilidades CSS. Sass permite pasar argumentos dentro de los @mixin, como en una función de Javascript.

@mixin modificador-colores($tipo: 'color') {
  @each $nombre, $valor-hex in $colores {
    &-#{$nombre} {
      #{$tipo}: $hex;
    }
  }
}

Hemos añadido el argumento $tipo con un valor por defecto de ‘color’, esto significa que, cuando llamemos el @mixin dentro de una clase, tendremos la posibilidad de cambiar el argumento tipo y así especificar el atributo que necesitamos. Ahora, al hacer el llamado del @mixin

.texto {
  @include modificador-colores(color);
}
.fondo {
  @include modificador-colores(background-color);
}

vamos a tener este resultado

.texto-verde {
  color: #1ECAB8;
}
.texto-azul {
  color: #4D79F5;
}
.texto-rojo {
  color: #F4C64D;
}
.fondo-verde {
  background-color: #1ECAB8;
}
.fondo-azul {
  background-color: #4D79F5;
}
.fondo-rojo {
  background-color: #F4C64D;
}

Hagámoslo más interesante

Con seguridad en un entorno real de desarrollo vamos a usar muchos más mapas que sólo uno para los colores, podemos crear mapas para tamaños de tipografía, tipos de fuentes, tamaño de imágenes… en fin, todo lo que nos podamos imaginar puede ir en un mapa que va a ser recorrido dentro de un @mixin, entonces ¿porqué no hacer un @mixin genérico que funcione para cualquier mapa?

@mixin generico($map, $atributo) {
  @each $nombre, $valor in $map {
     &-#{$nombre} {
      #{$atributo}: $valor;
     }
  }
}

Hemos ampliado la funcionalidad del @mixin para que pueda tomar los valores de cualquier mapa que creemos, lo hemos llamado ‘generico’ y tiene 2 parámetros: $map que será el nombre del mapa que queramos recorrer y $atributo que servirá para determinar el atributo del estilo.

Así, teniendo por ejemplo estos 2 mapas:

$colores: (
  verde: #1ECAB8,
  azul: #4D79F5,
  naranja: #F4C64D
);

$fontSize: (
   small: 12px,
   medium: 14px,
   large: 18px,
   x-large: 20px,
   xx-large: 30px
);

y aplicando el @mixin de esta manera:

.texto {
	@include generico($colores, 'color')
}
.fondo {
	@include generico($colores, 'background-color')
}
.fontSize {
	@include generico($fontSize, 'font-size')
}

obtendremos este CSS:

.texto-verde {
  color: #1ECAB8;
}
.texto-azul {
  color: #4D79F5;
}
.texto-naranja {
  color: #F4C64D;
}

.fondo-verde {
  background-color: #1ECAB8;
}
.fondo-azul {
  background-color: #4D79F5;
}
.fondo-naranja {
  background-color: #F4C64D;
}

.fontSize-small {
  font-size: 12px;
}
.fontSize-medium {
  font-size: 14px;
}
.fontSize-large {
  font-size: 18px;
}
.fontSize-x-large {
  font-size: 20px;
}
.fontSize-xx-large {
  font-size: 30px;
}

Excelente forma de escribir CSS en mucho menos tiempo!

Bluecell Diseño Web front end

Leave a Reply

Your email address will not be published. Required fields are marked *

Qué es la web 3.0 y cómo cambiará el mundo

Qué es la web 3.0 y cómo cambiará el mundo

July 2022

Leer artículo

leer artículo

WordPress vs Drupal: Comparativa para Elegir el Mejor CMS

WordPress vs Drupal: Comparativa para Elegir el Mejor CMS

December 2017

Leer artículo

leer artículo

Design thinking, la metodología pensada para el usuario.

Design thinking, la metodología pensada para el usuario.

February 2018

Leer artículo

leer artículo

Leer todos los artículos

ver todos los artículos