Como Trabajar con Variables en CSS

CSS

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)

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

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

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

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

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

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

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

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required