Qué son y cómo utilizar Variables CSS

Tutorial qué son y cómo se usan variables CSS

Ernesto BarrachinaDiseño webDeja tu comentario

Sí, has leído bien el título. ¡Existen las variables CSS y en este post te enseño cómo utilizarlas!

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

Más sobre el autor

Ernesto Barrachina

Me dedico al diseño web Valencia, y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

¿Necesitas un Diseño Web Valencia?

« Siguiente
Anterior »

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺