Variables CSS (Custom Properties)

Las variables CSS, también conocidas como Custom Properties, permiten almacenar valores reutilizables que puedes usar en múltiples lugares dentro de tu CSS. Esto facilita la gestión de estilos, ya que puedes cambiar un valor en un solo lugar y se actualizarán todos los lugares donde se utilice la variable.

1. Definición de Variables CSS

Las variables CSS se definen con la sintaxis --nombre-variable y se utilizan dentro del contexto de un selector. Se definen comúnmente en el selector :root para que sean globales, pero también pueden ser definidas en cualquier selector.

Sintaxis Básica:

:root {
    --color-principal: #3498db;
    --tamaño-fuente: 16px;
}

- --color-principal y --tamaño-fuente son nombres de variables.

2. Uso de Variables CSS

Para usar una variable CSS, se emplea la función var(). Esto permite aplicar el valor de la variable a propiedades CSS.

Sintaxis Básica para Uso:

.elemento {
    color: var(--color-principal);
    font-size: var(--tamaño-fuente);
}

En este caso, el color del texto será el valor de --color-principal y el tamaño de fuente será --tamaño-fuente.

3. Alcance y Especificidad

Las variables CSS tienen un alcance basado en el selector en el que están definidas. Las variables definidas en :root están disponibles globalmente, mientras que las definidas dentro de un selector específico solo están disponibles dentro de ese selector.

Ejemplo de Alcance:

:root {
    --color-global: #e74c3c;
}

.sección {
    --color-local: #2ecc71;
    color: var(--color-local);
}

.otro {
    color: var(--color-global); /* Aplica el color global */
}

En este ejemplo, .sección usa --color-local, mientras que .otro usa --color-global.

4. Valores Predeterminados

Puedes proporcionar un valor predeterminado para una variable en caso de que no esté definida, usando la sintaxis var(--nombre-variable, valor-predeterminado).

Sintaxis para Valores Predeterminados:

.elemento {
    color: var(--color-primario, #3498db); /* Usa #3498db si --color-primario no está definido */
}

5. Aplicaciones Comunes de Variables CSS

Tematización: Cambiar rápidamente el esquema de colores o fuentes en toda la web.

:root {
    --color-fondo: #fff;
    --color-texto: #333;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

.tema-oscuro {
    --color-fondo: #333;
    --color-texto: #fff;
}

Adaptabilidad: Ajustar estilos para diferentes dispositivos.

:root {
    --espaciado-base: 16px;
}

@media (max-width: 600px) {
    :root {
        --espaciado-base: 8px;
    }
}

.contenedor {
    padding: var(--espaciado-base);
}

6. Ejemplo Completo

Aquí tienes un ejemplo completo que utiliza variables CSS para gestionar un esquema de colores y tamaños de fuentes:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Variables CSS</title>
    <style>
        :root {
            --color-fondo: #f0f0f0;
            --color-texto: #333;
            --fuente-principal: 'Arial', sans-serif;
            --tamaño-fuente: 16px;
        }
        
        body {
            background-color: var(--color-fondo);
            color: var(--color-texto);
            font-family: var(--fuente-principal);
            font-size: var(--tamaño-fuente);
            margin: 0;
            padding: 0;
        }

        .titulo {
            color: var(--color-texto);
            font-size: calc(var(--tamaño-fuente) * 2);
        }
        
        .boton {
            background-color: var(--color-texto);
            color: var(--color-fondo);
            padding: var(--tamaño-fuente);
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .boton:hover {
            background-color: lighten(var(--color-texto), 20%);
        }
    </style>
</head>
<body>
    <h1 class="titulo">Título de Ejemplo</h1>
    <button class="boton">Botón</button>
</body>
</html>