Variables en CSS

Las **variables CSS** permiten almacenar valores en un solo lugar y luego reutilizarlos en todo el documento, lo que hace que el código sea más limpio, fácil de mantener y modificar. Estas variables también pueden ayudar a garantizar la consistencia de los estilos a través de todo el sitio.

¿Cómo crear una variable en CSS?

Las variables en CSS se definen utilizando la sintaxis --nombre-de-la-variable, y deben colocarse dentro de un selector, normalmente en el selector :root, para que sean accesibles globalmente en todo el documento:

        :root {
            --color-principal: #3498db;
            --color-secundario: #2ecc71;
            --fuente-principal: Arial', sans-serif';
            --espaciado: 16px;
        }
        

En el ejemplo anterior, hemos creado varias variables que representan colores, una fuente y un espaciado. Estas variables estarán disponibles en todo el documento.

¿Cómo usar las variables CSS?

Para usar las variables CSS dentro de las reglas de estilo, simplemente se hace referencia a ellas utilizando la sintaxis var(--nombre-de-la-variable):

        body {
            font-family: var(--fuente-principal);
           background-color : var(--color-principal);
           padding : var(--espaciado);
        }
        
        h1 {
            color: var(--color-secundario);
        }
        

En este ejemplo, las propiedades del body y h1 se definen utilizando las variables que definimos anteriormente, lo que permite cambiar fácilmente los estilos si se modifican las variables en el selector :root.

Ventajas de usar variables en CSS

El uso de variables en CSS tiene varias ventajas:

• Mantenimiento fácil: Si necesitas cambiar el color o el tamaño de la fuente en todo tu sitio web, solo necesitas cambiar el valor de la variable en el :root y el cambio se aplicará a todos los elementos que usen esa variable.
• Consistencia: Las variables aseguran que los valores utilizados en diferentes partes del documento sean siempre los mismos, lo que mantiene la coherencia en el diseño.
• Reutilización: Puedes reutilizar variables en todo el documento, evitando la repetición de los mismos valores una y otra vez.

Ejemplo de uso de variables con medios de comunicación (Media Queries)

Las variables también se pueden utilizar dentro de las media queries, lo que te permite cambiar los valores de las variables en función del tamaño de la pantalla:

        :root {
            --color-principal: #3498db;
            --color-secundario: #2ecc71;
        }
        
        @media (max-width: 600px) {
            :root {
                --color-principal: #e74c3c;
                --color-secundario: #f39c12;
            }
        }
        

En este ejemplo, cuando la pantalla tiene un ancho de 600px o menos, los colores de las variables --color-principal y --color-secundario cambian para adaptarse a una vista móvil.

Conclusión

Las variables en CSS son una herramienta poderosa que te permite organizar y gestionar estilos de manera más eficiente. Facilitan la personalización y mantenimiento del diseño de tu sitio, lo que mejora la calidad y flexibilidad del código CSS. Usarlas correctamente te ayudará a optimizar tus proyectos y a hacer que tu código sea más limpio y fácil de mantener.