🎨 Nivel 22 - CSS Variables

🤔 ¿Qué son las CSS Variables?

Variables CSS = Valores Reutilizables

Las CSS Variables (también llamadas Custom Properties) te permiten guardar valores y reutilizarlos en todo tu CSS. ¡Cambia un valor y se actualiza en todas partes!

Ventajas de usar variables CSS:

🎨 Crear temas fácilmente (claro/oscuro)
🔄 Cambiar colores en un solo lugar
📱 Adaptar diseños dinámicamente
⚡ Modificar estilos con JavaScript

📝 Cómo Usar Variables CSS

/* 1. DEFINIR variables en :root (global) */
:root {
    --color-primario: #14b8a6;
    --color-texto: #e2e8f0;
    --espaciado: 20px;
    --radio-borde: 15px;
}

/* 2. USAR variables con var() */
.boton {
    background: var(--color-primario);
    color: var(--color-texto);
    padding: var(--espaciado);
    border-radius: var(--radio-borde);
}

Reglas importantes:
• Los nombres empiezan con --
• Se usan con var(--nombre)
• :root las hace globales
• Puedes definirlas en cualquier elemento

🌈 Demo: Cambia el Tema

Haz clic en un tema para ver cómo cambian los estilos:

✨ Tarjeta de Ejemplo

Este contenido cambia de estilo según el tema seleccionado. ¡Las CSS Variables hacen todo el trabajo!

/* Así funciona el cambio de tema */
.tema-oscuro {
    --demo-fondo: #1a1a2e;
    --demo-texto: #e2e8f0;
    --demo-boton: #14b8a6;
}

.tema-claro {
    --demo-fondo: #f8fafc;
    --demo-texto: #1e293b;
    --demo-boton: #0891b2;
}

🎨 Crea Tu Propio Estilo

Usa los controles para personalizar la tarjeta en tiempo real:

🎨 Color de Fondo

🖌️ Color del Borde

📝 Color del Título

✏️ Color del Texto

📐 Radio del Borde 20px

📏 Padding 25px

🚀 Mi Tarjeta Personalizada

¡Cambia los colores y valores arriba para ver cómo se actualiza esta tarjeta en tiempo real! Las CSS Variables hacen que todo sea súper fácil.

⚡ Variables CSS + JavaScript

Puedes cambiar variables CSS desde JavaScript:

// Cambiar una variable CSS
document.documentElement.style.setProperty(
    '--color-primario', 
    '#ff6b6b'
);

// Leer una variable CSS
const color = getComputedStyle(document.documentElement)
    .getPropertyValue('--color-primario');

// Cambiar en un elemento específico
const tarjeta = document.querySelector('.tarjeta');
tarjeta.style.setProperty('--card-bg', '#000');

Esta técnica es perfecta para:
• 🌙 Modo oscuro/claro
• 🎨 Personalización por usuario
• 📊 Valores dinámicos (progreso, animaciones)

🎯 Quiz - ¡Demuestra lo que Aprendiste!

1. ¿Cómo se define una variable CSS?

$color: blue;

--color: blue;

@color: blue;

2. ¿Cómo se usa una variable CSS?

color: $primario;

color: --primario;

color: var(--primario);

3. ¿Dónde se definen variables globales?

:root { }

body { }

* { }

4. ¿Qué método JS cambia una variable CSS?

element.css('--var', 'value')

element.style.setProperty('--var', 'value')

element.setVariable('--var', 'value')

⭐ ⭐ ⭐