No he hablado antes de ellas porque hasta 2018 no fueron compatibles con todos los navegadores. Bueno, si eres de los que continúa con Internet Explorer (que los hay), olvídate, pero con todos los demás compatibilidad absoluta.
La función de las variables CSS es ahorrarte trabajo, y si ya alucinaste con las clases CSS, vas a flipar con lo que hacen sus variables 😀
¡Empecemos por el principio!
Qué son las variables CSS
De forma resumida te diré que, una variable CSS es una «cosa» que almacena un dato. En este caso, la variable almacena el valor de una propiedad CSS.
Te recuerdo que una propiedad en CSS puede ser el color, el margin, el padding…
Realmente no son variables, sino Propiedades Personalizadas, pero variables igualmente. Ya que se puede redefinir su valor en todo momento.
Por lo que, al ser variables… las variables CSS no tienen por qué tener siempre el mismo valor.
➡ Qué mejor forma de entender esta mierda explicación que con un ejemplo:
Pongamos por caso que estás diseñando tu nueva página web basada en una plantilla. Resulta que no te gustan los estilos aplicados por el tema, y quieres personalizar los tuyos.
Creas unas cuantas clases CSS para pintar del mismo color algunos párrafos y títulos, los fondos de tus botones y los bordes de las cajas de colores que usas para destacar textos.
.parrafo-rojo{
color: red;
}
h3.titulo-rojo{
color: red;
}
a.boton-rojo{
background: red;
}
.caja-color{
background: red;
}
Si has optado por esta solución, habrás hecho lo correcto pero, si te fijas, has escrito varias veces el mismo nombre del color.
Las variables CSS te ahorran repetir los valores asignados a las propiedades, además de que te permiten cambiarlos de un solo plumazo.
.parrafo-rojo{
color: var(--nombre-variable);
}
h3.titulo-rojo{
color: var(--nombre-variable);
}
a.boton-rojo{
background: var(--nombre-variable);
}
.caja-color{
background: var(--nombre-variable);
}
NOTA: En caso de que tu intención sea modificar los estilos de tu web de forma puntual, has leído suficiente. Ya conoces las variable CSS y que podrás usarlas algún día.
Sin embargo, cuando trabajes constantemente en tu web; añadiendo nuevos elementos y, por tanto, nuevas clases y estilos, la información que viene a continuación te resultará de gran utilidad. Porque te permitirá crear un «panel de control» para los valores compartidos de las propiedades CSS.
Cómo se utilizan las variables en CSS
Aunque parezca complicado, utilizar variables en CSS es muy fácil. Solo hay que declararlas para que el navegador web las reconozca, y luego utilizarlas allá donde quieras dentro del archivo style.css o entre las etiquetas <style> </style>.
Declarar variables CSS
Para que tu navegador web identifique la variable hay que indicárselo. Para ello, y siempre antes de cualquier otra regla de estilo, utilizaremos la pseudo-clase :root, que seleccionará el <html> del documento; su raíz.
:root{
}
Dentro de él, añadiremos los nombres y valores de nuestras variables globales.
Por ejemplo, voy a crear una variable con un nombre descriptivo de una propiedad, a la que llamaré:
--color-principal.
Así, solo con leerla sabré qué representa, y mi yo futuro recordará lo que hizo mi yo pasado 😉
:root{
--color-principal: red;
}
Un detalle importante es que las variables CSS empiezan con dos guiones: --.
Utilizar la variable CSS
Para llamar, invocar o utilizar el valor de la variable, sustituiremos el «valor habitual» de las propiedades, por el nombre de la variable a utilizar.
O sea, que si normalmente para colorear un párrafo de rojo escribíamos color: red;, ahora escribiremos color: var(--color-principal);
Dando lugar a una regla tal que así:
:root{
--color-principal: red;
}
p{
color: var(--color-principal);
}
Si retomamos el ejemplo inicial, observaremos que cambiando el valor de la variable «una sola vez» se modificarán todos los elementos HTML que la tengan aplicada.
:root{
--color-principal: purple;
}
.parrafo-rojo{
color: var(--color-principal);
}
h3.titulo-rojo{
color: var(--color-principal);
}
a.boton-rojo{
background: var(--color-principal);
}
.caja-color{
background: var(--color-principal);
}
Indicar que, si pensamos usar variables CSS, tendremos que acostumbrarnos a no utilizar nombres de color en las clases, porque «lo que hoy es rojo, mañana puede ser verde». Sobre todo, si eres de esos/as a los que les gusta ir renovando el aspecto de su web de vez en cuando.
Redefinir el valor de una variable CSS
Cuando diseñas una web, lo normal es asignar un color general para todos los textos; por eso de que todo vaya en consonancia. Sin embargo, solemos cambiar los colores de algunos elementos. Como por ejemplo el de los títulos.
Para asignar el mismo color a todos los textos de la web «con excepción de los títulos de tipo H1», solo tendremos que volver a declarar la variable dentro de la regla del h1 con su nuevo valor.
➡ ¿Recuerdas que antes he dicho que las variables no tienen que tener siempre el mismo valor?
:root{
--color-principal: red;
}
body{
color: var(--color-principal);
}
h1{
--color-principal: green;
}
Como el CSS se lee en cascada, y este será el ultimo estilo detectado para los H1, todos los títulos con esta etiqueta se verán del nuevo color, a pesar de que la variable es la misma.
La mejor práctica, siempre será crear un panel de control de variables CSS, con los colores asignados a cada elemento al inicio del archivo style.css
:root{
--color-h: #333333;
--color-texto: #383838;
--color-li: #5f5f5f;
}
h1, h2, h3, h4, h5, h6{
color: var(--color-h);
}
p{
color: var(--color-texto);
}
li{
color: var(--color-li);
}
E igual que hemos hecho con los colores, podremos hacerlo con otras propiedades:
:root{
--tamano-h1: 35px;
--tamano-parrafo:20px;
}
h1{
color: var(--color-h);
font-size: var(--tamano-h1);
}
p{
color: var(--color-texto);
font-size: var(--tamano-parrafo);
}
Valores de seguridad de las variables CSS
En caso de que no tengas decidido; por ejemplo un color para el texto general, es posible asignar valores de seguridad a las variables. Es decir, puedes no declararla hasta que tengas claro el valor definitivo, y mientras utilizar otro valor… digamos «demo».
Para ello, solo tendrás que asignar tu variable acompañada de un segundo valor, separado por una coma: color: var(--color-texto, color-seguridad);.
Ese será el color que se muestre hasta que declares otro en la variable.
:root{
--color-texto:;
}
p{
var(--color-texto, black)
}
Como verás, si eres capaz de visualizar el diseño web antes de crearlo, te resultará súper sencillo crear un panel de control a base de variables CSS.
Si te ha gustado comparte
About the Author
