Variables CSS: la capacidad de producir efectos de diseño dinámicos y personalizables es esencial en el campo del desarrollo web. Las propiedades personalizadas, o variables CSS, proporcionan una forma de llegar a este ámbito que permite a los desarrolladores especificar valores reutilizables dentro de las hojas de estilo y modificarlos dinámicamente durante el tiempo de ejecución. Esta publicación de blog explorará las variables CSS con un ejemplo práctico que resalta su capacidad dinámica.

Comprensión de las variables CSS
Los valores reutilizables de una hoja de estilo se pueden definir y utilizar en todo momento mediante el uso de variables CSS. Se declaran utilizando el prefijo — seguido de un nombre, normalmente dentro de la pseudoclase :root para disponibilidad global. Se pueden usar para almacenar valores como fuentes, colores, ancho, alto, etc. Estas variables incluso se pueden usar en otros archivos una vez que se definen en el código CSS. (Leer más)

Así es como se define una variable CSS:

:root {
  --main-color: #3498db;
}

En este ejemplo, hemos definido una variable llamada –main-color y su valor es #3498db. Lo hemos declarado dentro de la pseudoclase :root, lo que garantiza que se pueda acceder a la variable en cualquier lugar del código CSS.

Cómo utilizar variables CSS
Una vez definidas, puedes usar variables CSS en cualquier parte de tu código CSS usando la función var() para acceder a ellas.

Var():

La variable CSS var() permite ingresar el valor de una propiedad personalizada para reemplazar parte del valor de otra propiedad..

Sintaxis :

var(--custom-property);

Ejemplo :

.element {
  color: var(--main-color);
}

En este ejemplo, estamos usando la variable –main-color para establecer el color del texto de un elemento. Si decide cambiar el color principal más adelante, todo lo que puede hacer es actualizar el valor de la variable y se reflejará automáticamente en todos los elementos donde se use.

1.Creación de colores de tema dinámicos
Producción

Considere una situación en la que le gustaría diseñar una página web donde el color del tema cambie dinámicamente. Desea poder ofrecer a los usuarios la opción de hacer clic en un botón y luego ver cómo cambia toda la combinación de colores de la página. Veamos cómo las variables CSS pueden hacer esto posible. (Lea más sobre la variable CSS)

HTML:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

Este ejemplo muestra una página web con un botón y un encabezado. El color de fondo del botón y el encabezado se personalizan mediante la variable CSS –primary-color, que tiene un valor predeterminado de #3498db. Un script JavaScript crea un código de color hexadecimal aleatorio al hacer clic en el botón, que luego se asigna como el nuevo valor de la variable –primary-color. Como resultado, los usuarios obtienen una experiencia interesante e interactiva a medida que el color del tema del botón y el encabezado cambian dinámicamente.

Conclusión
En el desarrollo web, las variables CSS ofrecen un método versátil y eficaz para gestionar estilos. Al definir valores reutilizables y aplicarlos dinámicamente, los desarrolladores pueden crear sitios web más fáciles de mantener y personalizar. Las variables CSS proporcionan un amplio conjunto de herramientas para mejorar las capacidades de estilo de sus proyectos en línea, ya sea que se centren en la temática, la capacidad de respuesta o la animación. Para utilizarlos completamente en sus diseños, ¡comience a integrarlos en su flujo de trabajo CSS! (Leer más sobre la variable CSS)