Re: [csswg-drafts] [css-variables-2] Custom units as simple variable desugaring (#7379)

As defined here this might be helpful for design system helpers like [the 8pt grid](The Comprehensive 8pt Grid Guide. Start your UI project right with this… | by Vitsky | The Startup | Medium).

With the ability to inject the custom unit increment into the calc function you can start to do more like adding modular scales to CSS, or creating a complex `clamp()` function.

What if it looked something like this:

```css
@unit --scale { /* Changing this from @property to something more specific avoids the need for initial */
  syntax: "<length>";
  value: --value; /* This will be the input value */
  formula: calc(1rem * pow(1.5, var(--value)));
  initial: 1rem;
  inherits: true;
}

h1 {
  font-size: 4--scale; /* 5.0625rem */
}
```

You might also be able to do this to simplify clamp functions:

```css
@unit --fluid {
  syntax: "<length>";
  value: --value; /* This will be the input value */
  formula: clamp(1rem, 1vw * var(--value), 1rem * var(--value));
  initial: 1rem;
  inherits: true;
}

h1 {
  font-size: 4--fluid; /* easier to implement clamp function */
}
```

There is more opportunity than syntax sugar for design systems 8pt grid that I think is worthy of exploration.

-- 
GitHub Notification of comment by scottkellum
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7379#issuecomment-1170292266 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 June 2022 17:45:08 UTC