Use calc() (or equivalent) when defining values of Custom Variables

Allow the use of the calc() function when defining the value of custom variables. For example:

  • Define Variable A as 100vw

  • Define Variable B as 20px

  • Define Variable C using calc(var(--Variable-A) - var(--Variable-B)), resulting in 100vw - 20px


  • Callum Brown
  • Jul 30 2024
  • Justin Everett commented
    05 Mar 19:16

    This is a missing piece to variables. The introduction of variable modes was very helpful but without being able to define variables using another variable as an input the system is incomplete.

    The designer already lets you type custom values in the style panel e.g. calc() or use a pre-defined variable. However variables can only be defined as absolute values or as an alias to another variable.

  • Ulysses Miller commented
    05 Feb 04:13

    To this day, I still can't believe Webflow doesn't support it; it's an indispensable tool for me while coding websites.



  • Peter Nowell commented
    December 12, 2024 15:00

    I constantly rely on this when building sites with code, and I'm surprised Webflow doesn't support it yet!