TutorialesWeb

Cómo utilizar variables en CSS

Variables en CSS
Comparte

Utilizar variables en CSS es tan sencillo como escribir :root{–Nombre-variable:valor;}.

Una de las falencias que por años apañó el desempeño de CSS fue la carencia de uso de variables, sin embargo actualmente la mayoría de los navegadores principales soporta su uso. Esto le da nuevos “poderes” a CSS, que antes solo eran posibles utilizando preprocesadores como Sass o Stylus.

Sin más, aquí un ejemplo de declaración de variables:

Variables en CSS

En el ejemplo anterior se están declarando 3 variables:

–ColorFondo

–ColorTitulo

–ColorParrafo

Y cada una tiene un valor distinto. Como se puede ver, las variables terminan con punto y coma (;) e inician con doble guión (–).

A su vez, están contenidas en la declaración :root{}

Lee también: Conoce la Play Station 5 y sus juegos exclusivos

¿Cómo se llama al valor de las variables?

Una vez declaradas las variables y sus respectivos valores se utilizan mediante la función var(); Esta función se ubica como valor de la propiedad CSS, pasando como parámetro el nombre de la variable declarada anteriormente.

En el ejemplo el elemento p de la clase caja tiene como valor para el color del texto el dato contenido en la variable –ColorParrafo.

Con este método de uso de variables CSS toma una nueva dimensión en cuanto a la efectividad a la hora de escribir código. Si bien los preprocesadores siguen vigentes y ayudando en temas de compilación y agilización del trabajo, es notorio que el lenguaje base continúa evolucionando para brindar más y mejores posibilidades.

Enlace recomendado para página de colores HTML: https://htmlcolorcodes.com/es/

Mira el video tutorial a continuación

Comparte

Comenta en Facebook