Al escribir hojas de estilo CSS, debe haber notado que a menudo necesita escribir algunos valores particulares, como el color de varios elementos, repetidamente. Por lo tanto, para evitar esto, CSS permite a sus usuarios declarar variables para ciertos valores de CSS y usarlas en el código en lugar de escribir valores una y otra vez. Estas variables se denominan variables CSS que hemos discutido en profundidad en este artículo. Los temas en discusión en esta publicación son los siguientes.

1. Variables en CSS
2. Ventajas del uso de variables CSS
3. Declarando variables CSS globales y locales
4. Valores de retroceso
5. Variables primordiales en CSS

Variables en CSS

CSS permite a sus usuarios crear propiedades personalizadas que consisten en nombres y valores particulares que se denominan variables CSS. Estas variables cuando se declaran se pueden usar donde se requiera en el documento.

Con el fin de declarar estas variables, debe seguir un cierto conjunto de reglas:

• El primero es que el nombre de la propiedad personalizada o la variable CSS debe comenzar con guiones dobles.
• Estos son sensibles a los casos también, por lo que se debe tener un cuidado especial.

Aquí es cómo nombrar estas variables.

--color de texto: azul;

Para acceder a estas variables en sus hojas de estilo, se utiliza la función var () en CSS. Así es como usa la función var ().

var (-color de texto);

Ventajas del uso de variables CSS

A continuación hemos mencionado algunas ventajas del uso de variables en CSS.

1. Cuando esté creando un sitio web muy complicado, notará que sus valores de CSS se repetirán con demasiada frecuencia. Por lo tanto, para evitar escribir los mismos valores varias veces, puede generar una variable CSS. Estas variables se almacenan en un solo lugar y se puede acceder en cualquier otro lugar del archivo.
2. Otra ventaja de las variables CSS o las propiedades personalizadas es que son fáciles de entender, ya que son declaradas por los propios desarrolladores. Por ejemplo, -Text -Color es mucho más comprensible que #0000ff.

Declarando variables CSS globales y locales

Las reglas de CSS afirman que las variables CSS tienen un alcance local o global. Se puede usar una variable con alcance global donde sea necesario en todo el documento. Mientras tanto, una variable con un alcance local solo se puede recuperar por el selector en el que se define en.

Con el fin de crear una variable global utilizando la función var (), debe declararse en: selector de raíz. Mientras tanto, se puede crear una variable local dentro de cualquier selector.

Sintaxis

Para variables con alcance global.

:raíz
--Pading-Padding: 5px

La sintaxis establece que cualquier elemento que acceda a la variable -st -thing a través de la función var () tendrá un relleno de 5px.

Para variables con alcance local.

pag
--color de texto principal: marrón;
Color:--Main-Text-Color;

Ahora, podemos usar la variable "-Main-Text-Color" dentro del selector "P" localmente y tener el color marrón.

Ejemplo 1

Supongamos que desea usar la función var () al declarar variables globales.

Html

Este es un párrafo.

En el fragmento de código anterior, simplemente hemos creado un contenedor Div y anidadamos un

elemento dentro de ese contenedor Div.

CSS

:raíz
--Pink: #FFC0CB;
--Brown: #964b00;
--Azul: #0000ff;

div
color: var (-azul);
Color de fondo: var (-blanco);
relleno: 15px;

H1
Color de fondo: var (-blanco);
color: var (-azul);
borde: 3px sólido var (-marrón);
relleno: 40px;

En el código anterior, hemos definido algunas variables globales en: el selector de raíces, cada uno correspondiente a un color específico. Luego estamos utilizando esas variables globales en todo el documento donde sea necesario usando la función var (). La ventaja de hacer estas variables globales y luego usarlas en la función var () es que en este caso particular no necesita definir colores de elementos una y otra vez, en su lugar, solo use la función var ().

Producción

La función var () funciona correctamente.

Ejemplo 2
En el siguiente ejemplo, hemos demostrado cómo declarar y usar las variables CSS globales y locales.

Html

Este es un encabezado.

Este es un párrafo.

Aquí simplemente hemos creado un contenedor Div y anidadamos un encabezado y un párrafo dentro de él.

CSS

:raíz
--Pink: #FFC0CB;
--Brown: #964b00;
--Azul: #0000ff;

div
color: var (-azul);
Color de fondo: var (-rosa);
relleno: 15px;

H1
Color de fondo: var (-blanco);
color: var (-azul);
borde: 3px sólido var (-marrón);
relleno: 40px;

pag
--Púrpura: #6a0dad;
color: var (-púrpura);
borde: 2px var sólido (-marrón);
tamaño de fuente: 16px;
relleno: 20px;

En el código anterior, hemos creado algunas variables globales en: selector de raíz y luego usarlas a través de la función var () en todo el documento para diseñar nuestros elementos. Mientras tanto, si notas que en el pag Selector, hemos creado una variable local por el nombre -Purple para proporcionar un color púrpura solo al párrafo. Esta variable local solo puede ser accedida por el selector en el que se declara en.

Producción

El párrafo recibió un color morado con éxito utilizando una variable local.

Valores de retroceso

Los valores alternativos se consideran sustitutos, cuando desea acceder a una variable CSS utilizando la función var (), sin embargo, la declaración de la variable no es válida, o si la variable aún no se ha declarado. Estos también son útiles cuando se usan elementos personalizados, o Shadow Dom.

Con el fin de declarar valores de respuesta, debe seguir un cierto conjunto de reglas que hemos mencionado aquí.

1. El primer parámetro pasado a la función var () debe ser el nombre de la propiedad personalizada que se utilizará como sustituto.
2. El segundo parámetro que se pasa a la función debe ser un valor respaldo que actúe como un sustituto de la propiedad personalizada no válida.

Aquí hay un ejemplo.

div
color: var (-color de texto, rojo);

El fragmento de código anterior define que usa el color rojo, que es un valor respaldo como un sustituto del color del texto si -Text -Color no se declara.

Ahora que hemos entendido qué variables en CSS son, pasemos a nuestro próximo tema.

Variables primordiales en CSS

Anular una variable es un fenómeno donde una variable reemplaza otra. Ahora que hemos aprendido a declarar variables CSS con un alcance global o un alcance local, veamos cómo podemos anular estas variables donde se requieran.

Ejemplo

Para demostrar el procedimiento primordial, estamos utilizando el ejemplo utilizado anteriormente. Aquí una variable local anulará una variable global.

CSS

:raíz
--Pink: #FFC0CB;
--Brown: #964b00;
--Azul: #0000ff;

div
color: var (-azul);
Color de fondo: var (-rosa);
relleno: 15px;

H1
Color de fondo: var (-blanco);
color: var (-azul);
borde: 3px sólido var (-marrón);
relleno: 40px;

pag
--Azul: #000080;
color: var (-azul);
borde: 2px var sólido (-marrón);
tamaño de fuente: 16px;
relleno: 20px;

Lo que hemos hecho en el código anterior es que hemos declarado una variable global -Blue y lo estamos utilizando para diseñar algunos elementos. Sin embargo, cuando se trata del

Elemento queremos darle un tono diferente del color azul, por lo que dentro del selector P estamos definiendo una variable local con el mismo nombre "-blue" pero tiene un valor diferente. Por lo tanto, esta variable local anulará la variable global.

Producción

Se ha proporcionado un color azul marino al párrafo utilizando una variable local.

Conclusión

CSS permite a sus usuarios crear propiedades personalizadas que consistan en nombres y valores particulares que se denominan variables CSS. Estas variables se pueden usar, más adelante, en toda la hoja de estilo. Además, estos tienen un alcance global o un alcance local y se puede acceder utilizando la función var (). Puede evitar escribir los valores de CSS repetidos utilizando estas variables, además, son más fáciles de entender. También es posible anular las variables CSS entre sí. En este artículo, hemos discutido las variables CSS y cómo anularlas en detalle utilizando varios ejemplos.