Propiedades personalizadas (variables) en CSS
CSS ha ido evolucionando con el paso de los años, entre la primera versión y la actual se han ido incorporando diferententes funciones y utilidades que hacen que maquetar una web sea mucho más cómodo. Una de las últimas incorporaciones son las propiedades personalizadas, a las que habitualmente se las llaman variables por su similitud con las que se utilizan en programación. Esta función las venían implementando ya desde hace tiempo preprocesadores como Sass y Less, lo que hizo que se volvieran muy populares a la hora de maquetar una página web. Sin embargo CSS ha decidido hacerlas nativas y actualmente son soportadas al menos por todos los navegadores importantes.
Las variables de CSS se definen comúnmente en la pseudoclase :root
para que éstas sean accesibles a nivel global en todo el documento, aunque nada impide que las puedas definir en un ámbito más local como en una clase específica. La sintaxis es similar a la de cualquier propiedad de CSS pero precedida por dos guiones. Por ejemplo, supongamos que queremos crear dos propiedades personalizadas para almacenar dos colores. Lo que haremos es crear la clase contenedora y dentro ubicaremos las dos propiedades personalizadas a las que llamaremos por ejemplo --color-uno
y --color-dos
. A cada una le asignaremos un valor de color.
:root { --color-uno: #000000; --color-dos: #707070; }
A partir de este momento, podremos acceder a estos valores llamando directamente a la variable deseada. Para hacerlo, a la hora de asignar un valor a una propiedad en la que queramos usar nuestras variables, deberemos usar la sintaxis var(--variable-css)
. Siguiendo con el ejemplo anterior, supongamos que deseamos usar --color-uno
para los h1
de una web. Para eso, simplemente usamos la propiedad color
y en el valor var(--color-uno)
.
h1 { color: var(--color-one); }
De este modo podemos crear tantas propiedades personalizadas como necesitemos. Para mi es especialmente útil a la hora de utilizar fuentes y colores, ya que son valores que se suelen repetir en un diseño y me resulta más sencillo de recordar, además de hacer más sencillo el mantenimiento del código después.
Deja una respuesta