¡Hola Devs! ¿Cansado de Sass para funciones CSS?

Pues prepárate, porque el CSS nativo acaba de recibir un gran upgrade. La nueva regla @function te permite definir funciones reutilizables que aceptan argumentos, hacen cálculos y devuelven valores — todo sin necesidad de preprocesadores.

Esto es un game-changer. Menos dependencias, más claridad y mejor rendimiento. Vamos a darle.

Fuente: CSS-Tricks Almanac: @function

CSS custom function syntax and code example on a monitor screen Technical Structure Concept

Sintaxis y Primer Ejemplo

/* Función que calcula la mitad de cualquier valor */
@function --mitad(--tamano <length>) returns <length> {
  result: calc(var(--tamano) / 2);
}

.container {
  margin-inline: --mitad(20px); /* 10px */
}

Tipado Fuerte

@function --progreso(--actual <number>, --total <number>) returns <percentage> {
  result: calc(var(--actual) / var(--total) * 100%);
}

.barra-progreso {
  width: --progreso(3, 5); /* 60% */
}

Listas como Argumento Único

Usa # en el parámetro y {} al llamar:

@function --rango(--lista<length>#, --extra <length>) returns <length> {
  result: calc(max(var(--lista)) - min(var(--lista)) + var(--extra));
}

div {
  padding-block: --rango({10px, 100px, 50px, 25px}, 200px); /* 290px */
}

Lógica Condicional con Cascade

@function --tamano-ideal() returns <length> {
  result: 16px;
  @media (width > 1000px) {
    result: 20px;
  }
}

body {
  font-size: --tamano-ideal();
}

Funciones Anidadas y Valores por Defecto

@function --cuadrado(--n <number>) returns <number> {
  result: calc(var(--n) * var(--n));
}

@function --area-circulo(--radio <number>) returns <number> {
  --pi: 3.14159;
  result: calc(var(--pi) * --cuadrado(var(--radio)));
}

@function --vidrio-marca(--opacidad: 0.5) returns <color> {
  result: rgb(10 120 255 / var(--opacidad));
}

.header {
  background: --vidrio-marca(); /* 0.5 */
}

Developer writing native CSS @function with type checking on laptop

Limitaciones y Cuidados

  • Sin efectos secundarios: Solo retorna un valor. No puedes cambiar propiedades ni generar múltiples declaraciones. Para eso, espera la propuesta @mixin.
  • Dependencias circulares: Si una función llama a otra que llama a la primera, ambas se invalidan.
  • Soporte experimental: Solo Chrome 148+ lo soporta. Siempre usa fallbacks:
.elemento {
  width: 60%; /* fallback */
  width: --progreso(3, 5);
}

Siguientes Pasos

  • Pruébalo en Chrome Canary con chrome://flags/#enable-experimental-web-platform-features.
  • Combínalo con @property para propiedades customizadas tipadas.
  • Estate al tanto de la propuesta @mixin para lógica CSS más avanzada.

Diagram of CSS cascade and custom functions interaction in web development Development Concept Image

Conclusión

@function es un gran avance para CSS. Menos dependencias, más claridad y poder nativo. Empieza a experimentar hoy y prepárate para el futuro del desarrollo web.

Artículos relacionados:

Este contenido fue redactado con la asistencia de herramientas de IA, basándose en fuentes confiables, y fue revisado por nuestro equipo editorial antes de su publicación. No reemplaza el asesoramiento de un profesional especializado.