CSS Variables & Funciones

Custom Properties, calc(), clamp(), min(), max() y propiedades lógicas.

--custom-property · var() Variables

Declara con --nombre: valor en :root o en cualquier elemento. Usa con var(--nombre). Se heredan en cascada.

Tarjeta 1
Tarjeta 2
Tarjeta 3
:root { --primary: #3d7ef5; }
calc() · clamp() · min() · max() Funciones

Funciones matemáticas para valores dinámicos sin JavaScript.

/* calc: mezcla unidades */
width: calc(100% - 2rem);
padding: calc(var(--sp) * 2);

/* clamp(mín, ideal, máx) */
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(200px, 50%, 800px);

/* min / max */
width: min(500px, 90vw);
font-size: max(1rem, 2vw);
Este texto usa clamp() — redimensiona la ventana
Propiedades lógicas Moderno

Alternativas lógicas a propiedades físicas. Se adaptan automáticamente al writing-mode y dirección del texto.

/* Físico  →  Lógico */
margin-top     → margin-block-start
margin-bottom  → margin-block-end
margin-left    → margin-inline-start
margin-right   → margin-inline-end
width          → inline-size
height         → block-size
border-top     → border-block-start
@property Moderno

Registra una propiedad custom con tipo, herencia y valor inicial. Permite animar propiedades que antes no eran animables.

@property --hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 220;
}
.el {
  background: oklch(60% .2 var(--hue));
  transition: --hue 1s; /* ahora animable */
}
/* haz clic en el círculo ↑ */
Design Tokens con CSS Variables Arquitectura

Las propiedades custom son la base de los sistemas de tokens de diseño. Permiten un theming centralizado y consistente.

/* Tokens primitivos */
:root {
  --color-blue-500: #3d7ef5;
  --spacing-4: 16px;
  --radius-md: 8px;
}

/* Tokens semánticos */
:root {
  --color-primary: var(--color-blue-500);
  --space-component: var(--spacing-4);
}

/* Componente */
.btn {
  background: var(--color-primary);
  padding: var(--space-component);
  border-radius: var(--radius-md);
}
Dark Mode con variables Theming

Las CSS variables hacen trivial el modo oscuro: cambia los valores en :root según prefers-color-scheme.

Vista previa del tema

Texto secundario de ejemplo

:root {
  --bg: #ffffff;
  --text: #1a2332;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
  }
}
/* O con clase para toggle manual */
.dark { --bg: #0f172a; --text: #e2e8f0; }
env() Viewport

Accede a variables definidas por el entorno del usuario (navegador/SO). El caso más común: safe-area-inset para notches de iPhone.

/* Safe areas para iPhone X+ */
body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* Con fallback */
.nav {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Variables disponibles */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)