Variables avanzadas con funciones

Estamos potenciando las variables en Webflow. Con el lanzamiento de las variables de función, ahora puedes definir valores usando funciones CSS nativas como clamp(), calc(), min(), y max() directamente en Webflow.

Esto hace que tus valores de estilo sean más adaptables, flexibles y reutilizables, ayudándote a construir sistemas de diseño escalables sin depender de código personalizado.
‍

¿Qué son las variables de función?

Puedes establecer los valores de tus variables usando funciones CSS. Esto significa que puedes:

• Crear tamaños fluidos y adaptables con clamp()
• Realizar cálculos de diseño con calc()
• Aplicar estilos basados en lógica con min() y max()
• Mezclar y modificar colores mediante programación con color-mix()

Al igual que cualquier otra variable en Webflow, estos valores de función pueden reutilizarse en todo tu sitio y actualizarse desde una única fuente de verdad.

Una experiencia de edición más rápida e inteligente

Para dar soporte a las variables de función, hemos renovado los flujos de trabajo sobre cómo creas, conectas y editas variables:

• El menú del punto morado ahora es el menú "Conectar" – renombrado para reflejar mejor su propósito: conectar propiedades de estilo con variables, datos o valores personalizados. También encontrarás una nueva opción de filtro para ayudarte a encontrar rápidamente lo que necesitas.
• Un editor de valores personalizados rediseñado te brinda más potencia y flexibilidad, con funciones como:
  • Autocompletado para variables y funciones CSS
  • Referencias de MDN y fragmentos de código integrados
  • Edición con múltiples cursores, atajos de teclado y compatibilidad total con saltos de línea y tabulaciones
• Atajos que ahorran tiempo para agilizar tu flujo de trabajo:
  • Desde el panel de Variables, pega una función CSS directamente en un campo de variable
  • Presiona = al configurar una propiedad de estilo o una variable para saltar directamente al editor de funciones

Estas actualizaciones están diseñadas para que el estilo dinámico se sienta intuitivo, incluso si no escribes CSS a mano.