Q47: What are CSS Custom Functions (@function) and how do they extend CSS modularity?
The CSS Functions specification introduces custom CSS functions defined via @function --fn-name(). Custom functions accept parameters and return computed values using --return, bringing modular functional calculations to native CSS stylesheets.
Native CSS Custom Function
@function --fluid-spacing(--base) {
--return: calc(var(--base) * 1vw + 0.5rem);
}
.card {
padding: --fluid-spacing(2);
}💡 The custom function evaluates the formula and returns computed spacing values natively.
Key Takeaways
- Defines reusable custom logic functions natively using
@function. - Accepts parameters and returns computed CSS values.
Knowledge Check
Which directive defines a native custom function in modern CSS stylesheets?