Las variables en CSS, también conocidas como "custom properties" (propiedades personalizadas), permiten almacenar valores que pueden ser reutilizados en todo el documento CSS. Esto facilita la gestión y el mantenimiento del código, especialmente en proyectos grandes.

Las variables en CSS son una forma de almacenar valores que pueden ser reutilizados en diferentes partes de tu hoja de estilos. Se definen con un nombre precedido por dos guiones (--) y se accede a ellas usando la función var().

En este ejemplo:

• Las variables --primary-color, --secondary-color, y --font-size se definen en el selector :root, que representa el elemento raíz del documento.
• Luego, estas variables se utilizan en las reglas de estilo para body y h1.

1. Reutilización de Código: Puedes definir un valor una vez y reutilizarlo en múltiples lugares.
2. Mantenimiento: Cambiar el valor de una variable actualiza automáticamente todos los lugares donde se utiliza.
3. Consistencia: Asegura que los valores utilizados en todo el documento sean consistentes.

En este ejemplo, tanto el body como los button utilizan las mismas variables para sus estilos, asegurando consistencia y facilitando el mantenimiento.

Puedes proporcionar un valor por defecto a una variable en caso de que no esté definida.

En este caso, si --main-color no está definida, el color por defecto será #000.

Las variables pueden ser definidas en cualquier selector, no solo en :root.

Aquí, --container-padding solo está disponible dentro del contexto de .container.

1. Define las siguientes variables en el selector :root:

   • --primary-bg-color: #ffffff
   • --primary-text-color: #333333
   • --primary-padding: 15px

2. Aplica estas variables a los siguientes elementos:

   • body: Usa --primary-bg-color para background-color y --primary-text-color para color.
   • header: Usa --primary-padding para padding.

Las variables en CSS son una herramienta poderosa para mejorar la reutilización, el mantenimiento y la consistencia del código. Al definir valores una vez y reutilizarlos en múltiples lugares, puedes hacer que tu hoja de estilos sea más manejable y fácil de actualizar. En el próximo tema, exploraremos las funciones en CSS, que te permitirán realizar cálculos y manipulaciones más avanzadas con tus estilos.