Stripes con CSS Custom Properties

Las stripes son esas franjitas tan bonitas que podemos ver en muchos sitios en la calle, a menudo en carteles pero también en lugares cotidianos.

Stripes por todos lados

Empecemos

Para crear un box con stripes dentro, es tan simple como generar un div con ancho y alto (le damos ancho y alto ya que no tiene contenido, si lo tuviera no sería necesario):

Nuestro contenedor de stripes inicial
Habemus stripes!
  • a partir de esos 15px y hasta los 30px le asignamos el color amarillo
  • …esto se repite todo el tiempo completando los stripes.
Las stripes y sus modificadores

Refactorización con CSS Custom Properties

Lo primero que haremos será definir las variables que utilizaremos y que luego serán modificadas según cada caso.

Nuestro stripe, ahora con CSS Custom Properties
Nuestros stripes refactorizados con CSS Custom Properties

Conclusión

Al final, lo bueno de las CSS Custom Properties es que sólo definimos las variables que vamos a reutilizar y luego tenemos que simplemente llamarlas y modificarlas, sin necesidad de reescribir una y otra vez todas las propiedades que las usan.