Web Wish 12: Custom CSS Functions

Some CSS declarations tend to repeat with only minor tweaks to their values – like converting px to rem, or setting up fluid typography.

With the introduction of custom properties, it became possible to build function-like custom properties to reduce this repetition. Miriam Suzanne demonstrated this brilliantly in Custom Properties in the Cascade.

While useful, this technique has its limitations.

Thankfully Miriam has proposed a new solution: Custom CSS Functions and Mixins. The editors draft is beginning to take shape, and introduces the ability to define custom functions with @function.

Here's how it could look:

@function --as-rem(--length <length>) {
  result: calc(var(--length) / 16px * 1rem);     
}

h1 {
  font-size: --as-rem(22px);  
}

Mixins might still be a long way off, so this holiday, I'm wishing for a browser prototype of custom CSS functions, available behind a flag.

Relevant issues and PRs: