En CSS, las propiedades personalizadas (también llamadas como variables) son entidades definicas por los autores de CSS que contienen valores específicos que se pueden vovler a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, –main-color: black;) y se acceden mediante la función var() por ejemplo color:var(–main-color);
Las variables CSS están sujetas a la cascada y heredan su valor de su padre.
Uso básico
Para declarar propiedades personalizadas (variables) usamos un nombre que comience con dos guiones (–), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:
Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:
Para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función var(), en lugar de cualquier otro valor normal.
Ejemplo con propiedades personalizadas
Nuestro HTML sería:
Y nuestro CSS:
… lo cual nos lleva a esto:
Observa la repetición en el CSS. El color de fondo se pone lightpink en varios lugares. Para algunas declaraciones CSS, es posible declarar esto más alto en la cascada y dejar que la herencia CSS resuelva este problema de forma natural.Al declarar una variable en la pseudo-clase :root, podemos evitar repetición usando la variable. Y sería:
Esto conduce al mismo resultado, pero permite una declaración canónica de la propiedad deseada; muy útil si queremos cambiar el valor en toda la página más tarde.
Herencias de propiedades personalizadas
Las propiedades personalizadas heredan. Lo que significa que si no se establece ningún valor para una propiedad personalizada en un elemento dado, se utiliza el valor de su elemento padre. El siguiente HTML y CSS interno:
En este caso, los resultados de var(–test) son:
Para el elemento class=»centro»: 10px
Para el elemento class=»clase»: 2em
Para el elemento class=»último»: 10px (heredado de su padre)
Para el elemento class=»area»: valor no válido, que es el valor predeterminado de cualquier propiedad personalizada.
Tenga en cuenta que éstas son propiedades personalizadas, no variables reales como podemos encontrar en otros lenguajes de programación. El valor se calcula donde sea necesario, no se almacena para su uso en otras reglas. Por ejemplo, no se puede declarar una propiedad para un elemento y esperar recuperarla en las reglas del descendiente de un hermano. La propiedad sólo está configurada para el selector que coincida y sus descendientes, como cualquier CSS normal.
Bibliografía
https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties