Playground de @function en CSS

Construye funciones CSS personalizadas, añade o elimina parámetros con tipos y valores por defecto, combina varios result con @media y copia un ejemplo completo listo para probar.

Presets

Elige un ejemplo completo como punto de partida y personaliza cualquier parte de la función.

Firma de la funciónEl nombre de una función CSS es un <dashed-ident> y empieza por --. Los tipos de parámetros y el tipo de retorno son opcionales; sin tipo equivalen a type(*).

Nombre

El prefijo -- se añade automáticamente si falta.

Tipo de retorno

Parámetros

Puedes dejar la función sin parámetros o añadir hasta seis.

Parámetro 1--narrow <length>

Nombre del parámetro

Tipo aceptado

Valor por defecto

Déjalo vacío para que el parámetro sea obligatorio.

Valor de prueba

Parámetro 2--wide <length>: 2.65rem

Nombre del parámetro

Tipo aceptado

Valor por defecto

Déjalo vacío para que el parámetro sea obligatorio.

Valor de prueba

Omitir al llamar y usar el valor por defecto

Cuerpo y lógicaresult define el valor devuelto. Los result dentro de reglas anidadas participan en la cascada: coloca el result general antes del condicional.

result

Añadir un result condicional con @media

@media

Escribe solo la condición, por ejemplo (width < 500px).

result dentro de @media

Llamada--responsive-size(1.35rem)

HTML

<article class="specimen">
  <p class="specimen-eyebrow">CSS custom function</p>
  <h1>Una fórmula, muchos resultados</h1>
  <p>El resultado de la función se aplica directamente sobre este componente de ejemplo.</p>
</article>

CSS

@function --responsive-size(--narrow <length>, --wide <length>: 2.65rem) returns <length> {
  result: var(--wide);
  @media (width < 500px) {
    result: var(--narrow);
  }
}

.specimen {
  padding: clamp(1.25rem, 6vw, 2.75rem);
  display: grid;
  gap: 0.75rem;
  background: #171a28e8;
  color: #f5f7ff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: --responsive-size(1.35rem);
}

.specimen-eyebrow {
  margin: 0;
  color: #ff9a6f;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.specimen h1 {
  margin: 0;
  font-size: 1em;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.specimen > p:last-child {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}