Unitless and percentage units for variables

it's needed for certain calculated styling features such as:

font-size: calc(var(--font-base-size) * var(--font-h1-size-mod));

where the base size is a rem and I'm looking to calculate different heading sizes based on one base size value to globally change font styles across the site quickly and consistently. Or if I wanted unitless line height.

  • Steve Clark
  • Jan 10 2024
  • Jedi Master commented
    20 Feb 12:29am

    I know this is an old post but I came looking for info on this and didn't turn up much. So I found my own solution that works well for most use cases. At the top of each page (I normally add it to my nav component) add an embed with the same variable names but custom values. Something like this:

    <style>
    
    :root {
    --_fonts---step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --_spacing---xl: calc(100vw - 40px);
    }
    </style>

    In this example I have variable collections named "fonts" & "spacing" and size variables named "step-1" and "xl" respectively.
    This style overwrites the original values but allows you to still use the variable in the visual editor. Alternatively you can add the css style block in the custom code section for the entire site however you will not see the changes in the visual editor only on the published site.

    Just a note - if you add the embed to each page be sure it is part of a component so that you only have to make changes in 1 place.

    Hope this helps and can't wait for native custom variables!


  • Nathanael commented
    25 Apr, 2024 06:37pm

    I also want to use unitless variables to control the number of grid rows/columns in various contexts, etc.

  • Healthy Shark commented
    24 Jan, 2024 07:11am

    it's needed for certain calculated styling features such as:

    font-size: calc(var(--font-base-size) * var(--font-h1-size-mod));

    where the base size is a rem and I'm looking to calculate different heading sizes based on one base size value to globally change font styles across the site quickly and consistently. Or if I wanted unitless line height.

  • Luz Wedgeworth commented
    18 Jan, 2024 01:39pm

    Yes!!!

  • Keywon Chung commented
    17 Jan, 2024 09:52pm

    Unitless is also needed to change z-index, etc.

  • Luz Wedgeworth commented
    16 Jan, 2024 01:14pm

    Yes!!

  • Keywon Chung commented
    16 Jan, 2024 12:54am

    Yes we need the percentage unit in size variables! It's often used for sizing elements

  • Tanel Rebane commented
    13 Jan, 2024 03:59pm

    Yes please!!!

  • Tobias Vollprecht commented
    12 Jan, 2024 01:50pm

    Indeed - it is needed! By the way - in the interaction settings you can assign percentages to variables. Why not in the variables panel?

  • Ray Tri commented
    11 Jan, 2024 03:21pm

    This is extremely needed.