@function

Developer use cases

• I'd like an easy way to make a color partially transparent, like `background-color: translucent(var(--m3-scheme-on-background) / 0.08)`. I could literally define a `--translucent` function with `@function`.

  I'd like an easy way to make a color partially transparent, like `background-color: translucent(var(--m3-scheme-on-background) / 0.08)`. I could literally define a `--translucent` function with `@function`. [see original comment]
• With CSS functions, I could simply declare a single parametrized function once (instead of 30+ times the exact same function for each property), and reuse it whereever I need it.

  With CSS functions, I could simply declare a single parametrized function once (instead of 30+ times the exact same function for each property), and reuse it whereever I need it. [see original comment]
• I want to use @function to encapsulate complex styling logic in a reusable, DRY way. This can significantly reduce CSS bundle sizes, reduce maintenance requirements, and promote uniformity. It is compatible with any framework by construction, and usable directly in any form of markup (TSX, RSX, etc). Even simple react apps that rely heavily on inline styles (which normally lack support for features like @media), can easily bake in complex, comprehensive styles without onerous build concerns. This would be the single biggest impact CSS feature in my decade as a developer.

  I want to use @function to encapsulate complex styling logic in a reusable, DRY way. This can significantly reduce CSS bundle sizes, reduce maintenance requirements, and promote uniformity. It is compatible with any framework by construction, and usable directly in any form of markup (TSX, RSX, etc). Even simple react apps that rely heavily on inline styles (which normally lack support for features like @media), can easily bake in complex, comprehensive styles without onerous build concerns. This would be the single biggest impact CSS feature in my decade as a developer. [see original comment]
• I'd like to create a function which takes a min and max number and a min and max viewport size (or default values) and returns a clamp() function with a smooth transition between the min and max using vw units.

  I'd like to create a function which takes a min and max number and a min and max viewport size (or default values) and returns a clamp() function with a smooth transition between the min and max using vw units. [see original comment]
• Like others, I want to use functions to abstract out the more tedious, verbose and illegible design patterns that I regularly use in my design systems. The most basic example being derived colors, such that I can pass something like `--clr-shift(var(--clr-primary), 10)` to in/decrease chroma and lightness by 10%

  Like others, I want to use functions to abstract out the more tedious, verbose and illegible design patterns that I regularly use in my design systems. The most basic example being derived colors, such that I can pass something like `--clr-shift(var(--clr-primary), 10)` to in/decrease chroma and lightness by 10% [see original comment]
• Using rem units in css has a major advantage of scaling down the webpage by equal proportional in media query by reducing the root font size and thus reducing the overwriting code. We have an architecture in css files while developing a webpage, 1. We have a common css that holds the styling for common elements (global header-footer, etc.). 2. We have a template css that holds the styling for webpages that comes under a particular template. 3. We then have a product css that contains the styling of product level elements or components (product header-footer, etc). 4. Page level css that contains the styling for that particular webpage (part that lies in between the header and footer). Now, with this architecture, it is difficult for me to use rem units in css as changing the root font size in any css file under a media query would affect every other components differently and thus resulting in the decision of not changing the root font size at all. So, in order to achieve this advantage I could use a scoped custom property called "--page-zoom : 1" and a custom function called "--rem" which when passed a number as parameter results the value multiplied with the "--page-zoom" value. I could now use --rem(5) instead of 5rem. This doesn't increase the verbosity and in media query, I could just change the value to "--page-zoom: 0.85" and this would scale the webpage proportionally as it would work when root font size is reduced but with the advantage of having this scaling applied only for that component.

  Using rem units in css has a major advantage of scaling down the webpage by equal proportional in media query by reducing the root font size and thus reducing the overwriting code. We have an architecture in css files while developing a webpage, 1. We have a common css that holds the styling for common elements (global header-footer, etc.). 2. We have a template css that holds the styling for webpages that comes under a particular template. 3. We then have a product css that contains the styling of product level elements or components (product header-footer, etc). 4. Page level css that contains the styling for that particular webpage (part that lies in between the header and footer). Now, with this architecture, it is difficult for me to use rem units in css as changing the root font size in any css file under a media query would affect every other components differently and thus resulting in the decision of not changing the root font size at all. So, in order to achieve this advantage I could use a scoped custom property called "--page-zoom : 1" and a custom function called "--rem" which when passed a number as parameter results the value multiplied with the "--page-zoom" value. I could now use --rem(5) instead of 5rem. This doesn't increase the verbosity and in media query, I could just change the value to "--page-zoom: 0.85" and this would scale the webpage proportionally as it would work when root font size is reduced but with the advantage of having this scaling applied only for that component. [see original comment]