CSS Custom Properties o Propiedades Personalizadas

Las CSS Custom Properties o propiedades personalizadas (también llamadas variables CSS) nos permiten definir nombres para valores determinados de las propiedades. De esta forma, se puede utilizar ese nombre como si fuese una variable. La gran ventaja es que al modificar el valor de esas «variables» se cambia automáticamente en todos los lugares del documento CSS en los que se haya usado ese nombre.

Esta característica es utilizada recientemente ya que no estaba presente en las primeras versiones de CSS ni soportada en todos los navegadores en las siguientes versiones.

Definición de propiedades personalizadas

Para definir una propiedad personalizada pondremos dos guiones  -- delante del nombre que queramos utilizar. Para definir la propiedad personalizada para todo el documento HTML la incluiremos en el pseudoelemento :root. Ejemplo:

:root {
  --principal-color: black; /* Valor personalizado */
  --font: "Arial";
}

Uso de propiedades personalizadas

Para utilizar una propiedad personalizada hay que insertar su nombre dentro de la expresión var():

.clase {
  background-color: var(--principal-color);
  font-family: var(--font);
}

Ejemplo en CodePen:

0