Como Trabajar con Variables en CSS

2 minuto(s)

En esta página:

Existen muchos lenguajes de programación en donde puedes emplear o usar variables para almacenar valores para lograr un objetivo, en CSS (Cascading Style Sheets) en español Hojas de Estilo en Cascada desde ese año 2018 el soporte es Global y todos los Navegadores Modernos las soportan, excepto IE, este aún no tiene soporte para variables CSS, en este artículo te explicaremos como trabajar con Variables en CSS.

Uso de Variables en CSS

El uso de variables en CSS es muy fácil, básicamente solo necesitas crear un variable y colocar una propiedad dentro de esta variable, luego puedes usar la variable en donde desees, por ejemplo crearemos una variable con un color naranja (orange)


--mi-variable-color: orange;

--mi-variable-color: orange;

Viendo la sencilla estructura de una variable, podemos hacerla más especifica, le llamaremos –color-texto


--color-texto: orange;

--color-texto: orange;

Para usar esta variable solo debes escribirla donde necesites usarla, por ejemplo le daremos el color naranja(orange) a los textos internos en un párrafo


p {
  color: var(--texto-color);
}

p {

color: var(--texto-color);

}

Herencia

Una Variable puede heredar el valor de la Primera variable, si es que una variable no contiene un valor o ese valor no es válido, entonces el valor de esta variable usará el valor de la Primera variable. Por ejemplo tenemos solamente 2 clases variables


.color1 {
  --color: red;
}

.color2 {
  --color: purple;
}

.color1 {

--color: red;

}

.color2 {

--color: purple;

}

Y tenemos 3 elementos entonces como el tercer elemento tiene la clase color3 la cual no existe, este tercer elemento hereda la clase color1 y por ende la variable con sus propiedades, la estructura para que se la herencia debe ser la siguiente, en donde el elemento p con clase3 esta dentro de los elementos color1 y color2


<div class="color1">

  <div class="color2">

    <p class="color3"> <!-- Aca se pinta de color morado(purple) todo el texto --> </p>

  </div>

</div>

</div>

Valores de Apoyo

A veces cuando esta mal definido el valor o contenido de una variable, se puede usar un valor de apoyo o otra variable, por ejemplo


/* Si la variable --color no funciona se usará el color 'brown' */
.torta {
  color: var(--color, brown);
}

/* Si la variable --color no funciona se usará la variable '--color2' y si esta tampoco funciona, se usará el color 'purple' */
.gelatina {
  background-color: var(--color, var(--color2, purple)); 
}

/* Si la variable --color no funciona se usará el color 'brown' */

.torta {

color: var(--color, brown);

}

/* Si la variable --color no funciona se usará la variable '--color2' y si esta tampoco funciona, se usará el color 'purple' */

.gelatina {

background-color: var(--color, var(--color2, purple));

}

Uso de Variables CSS en Javascript

En ocasiones necesitarás usar una Variable CSS en tu código Javascript, para esto solo debes escribir el nombre de la variable, por ejemplo


// Para Llamar a la variable CSS de manera 'inline'
element.style.getPropertyValue("--mi-variable");

// Para Llamar a la variable CSS desde cualquier parte del código
getComputedStyle(element).getPropertyValue("--my-var");

// Para Llamar a la variable CSS de manera 'inline'

element.style.getPropertyValue("--mi-variable");

// Para Llamar a la variable CSS desde cualquier parte del código

getComputedStyle(element).getPropertyValue("--my-var");

Con estos conceptos sencillos, debes de haber entendido como funcionan las Variables CSS y esperamos que puedas emplearlas en tus próximos proyectos.