Como crear y utilizar variables en CSS

En este artículo vas a descubrir como crear y utilizar variables en tus hojas de estilo CSS utilizando los Custom Properties sin necesidad de utilizar SASS o LESS.

El objetivo principal es la creación de variables de forma simple que pueden ser utilizadas para representar colores o espacios que se utilizan en toda la hoja de estilos.

La principal ventaja de esto es que modificando la variable se aplican todos los cambios en todo el documento.

Esta técnica puede ser un buen punto de partida para empezar rápido a crear y usar variables dentro de tus hojas de estilos.

Crear una variable en CSS es tan simple como agregar lo siguiente al principio de tu hoja de estilos:

:root {
    --primario: #7abe47;
    --secundario: #ff6c85;
}

En este caso, he creado 2 variables para identificar el color primario y el color secundario que se utilizará en el diseño de la página Web.

De esta forma, puedes crear tantas variables como quieras. Yo tan solo he definido 2 colores, pero también puedes definir paddings, margins, borders, etc.

¿Cómo puedo leer las variables creadas en el documento CSS?

Fíjate a continuación:

body {
    background-color: var(--primario);
}

Al cuerpo de la página (body) le estoy dando el color de fondo primario.

La principal ventaja de utilizar variables en CSS es que al cambiar el valor de la variable, cambia su valor en todos los lugares donde haya sido utilizada.

El soporte de las variables CSS está bien aceptado por la mayoría de navegadores. Parece ser que solo Internet Explorer no lo soporta.

Si necesitas que tu proyecto funcione también en Internet Explorer tendrás que buscar una solución más sofisticada como SASS para la creación de variables en tu documento CSS, en caso contrario, esta característica de CSS te puede venir genial.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.