Las variables CSS o custom properties están definidas desde el 2015. En un principio no se usaban demasiado por temas de compatibilidad con algunos navegadores, aunque hoy en día la compatibilidad es mínima y hay opciones css para solventarlo, lo verás a lo largo del artículo.
Si eres de los que nunca las utilizaste, ya verás que una vez que empiezas a utilizarlas son adictivas. Si las usas bien, te ahorrarán tiempo. Y además, están de forma nativa, por lo que si cambias su valor, por ejemplo, con javascript, se cambia el valor.
¿Quieres aprender como utilizar una variable CSS? Sigue el tutorial explicado más abajo y verás que es más fácil de lo que parece.
¿Qué son las variables CSS?
Pero empecemos por el principio, ¿qué son las custom properties o variables CSS? Las custom properties son variables que se definen en un único lugar y se pueden utilizar para distintos elementos (h1, p…), por lo que cambiando ese valor en un único lugar se cambia en todos los elementos donde está definida esa variable. Así escrito puede sonar un poco rollo, no te preocupes, vamos a ver ejemplos con código donde vas a poder ver paso a paso como se añaden.
¿En qué casos es mejor utilizar las propiedades personalizadas CSS?
Siempre que tengas un dato que se repite en varios sitios es recomendable que las utilices. Por ejemplo, son muy usadas para definir los colores del tema en un único sitio y si decides cambiarlos automáticamente se cambie en toda la web, únicamente cambiandolo en un sitio.
¿Cómo se definen estas variables en el código CSS?
Vamos a ver un ejemplo:
.carta {
--espacio: 1.2rem;
padding: var(--espacio);
margin-bottom: var(--espacio);
}
En este ejemplo tenemos un estilo al que llamamos carta. Lo siguiente que nos aparece es --espacio, que es una variable CSS, y le damos el valor que queramos. A continuación, llamamos a esa variable, por lo que el padding y el margin-bottom cogen automáticamente el valor 1.2rem.
A TENER EN CUENTA:
- La variable CSS se declara con dos guiones antes de su nombre, por ejemplo
--espacio - La variable siempre tiene que estar dentro de un selector, en este ejemplo es
.carta. - Para llamar a esa variable se utiliza la palabra var, por ejemplo
var(--espacio) - Las variables pueden ser valores hexadecimales, funciones de color, unidades de todo tipo e incluso cadenas de texto.
- Estas propiedades personalizadas funcionan de forma nativa en CSS.
¿Se puede crear una variable CSS dentro de otra variable CSS?
Sí, se puede crear un valor de una propiedad personalizada dentro de otra propiedad personalizada. Es mucho rollo de palabras, pero con un ejemplo verás que es sencillo:
html {
--red: #a24e34;
--green: #01f3e6;
--yellow: #f0e765;
--error: var(--red);
--errorBorder: 1px dashed var(--red);
--ok: var(--green);
--warning: var(--yellow);
}
En el ejemplo vemos que la variable ok tiene a su vez, otra variable css que se llama green.
Esta opción abre el abanico de posibilidades con las variables CSS.
¿Funcionan las variables con estilos en línea?
Igual que en el caso anterior, sí que puedes añadir variables CSS, en este caso en los estilos en línea. No es lo más típico, se suelen añadir en el CSS, pero sí es posible. Ahí te va un ejemplo:
<div style="--color: red;"></div>
Herencia
La herencia es una opción muy útil y que vas a utilizar seguro. Si defines una variable en el body, si llamas a esa variable en cualquier otro sitio, se va a mostrar ese color del body, pero si por el medio nombraste esa variable con otro valor, por encima del elemento va a mostrar el más cercano valor declarado. ¿Cómo te quedas? Parece un rollo pero con un ejemplo lo vas a ver claro.
El código CSS será:
body {
--background: white;
}
.sidebar {
--background: gray;
}
.module {
background: var(--background);
}
El código HTML es:
<body> <!-- --background: white --> <main> <div class="module"> I will have a white background. </div> <main> <aside class="sidebar"> <!-- --background: gray --> <div class="module"> I will have a gray background. </div> </aside> </body>
El color mostrado en .module va a ser el color definido en .sidebar porque es el más cercano a él. Si .sidebar no estuviera definido el color mostrado sería el indicado en el body.
Casi siempre las variables personalizadas se definen en la raíz. Aunque si sólo las vas a utilizar en una parte del diseño tampoco tiene mucho sentido declararlas a nivel global. Como prefieras, aunque lo recomendable es lo que te comento, si las vas a utilizar en todo el sitio decláralas a nivel global, por el contrario, si va a ser en un lugar específico sólo decláralas ahí.
:root {
--color: red;
}
Para los navegadores que no las soporten
Actualmente casi la totalidad de navegadores soportan las variables css pero si es el caso de que quieras estar seguro que se vea ese estilo, sería con, por ejemplo, el siguiente código:
:root{ --background:black;}
.module {
background: black;
background: var(--background);
}
De esta forma si el navegador no soporta la propiedad personalizada tendrá declarado también el fondo de la forma típica, la cual sí soportan todos los navegadores.
Y hasta aquí, toda la información sobre las variables CSS. Si tienes alguna duda, puedes escribir más abajo, en comentarios.
