{"id":384685,"date":"2025-03-03T06:34:22","date_gmt":"2025-03-03T13:34:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=384685"},"modified":"2025-03-03T06:50:04","modified_gmt":"2025-03-03T13:50:04","slug":"functions-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/functions-in-css\/","title":{"rendered":"Functions in CSS?!"},"content":{"rendered":"\n

A much-needed disclaimer:<\/em> You (kinda) can use functions now!<\/strong> I know, it isn’t the most pleasant feeling to finish reading about a new feature just for the author to say “And we’ll hopefully see it in a couple of years”. Luckily, right now you can use an (incomplete<\/a>) version of CSS functions in Chrome Canary behind an experimental flag, although who knows when we’ll get to use them in a production environment.<\/p>\n\n\n\n\n\n\n

Arguments, defaults, and returns!<\/h3>\n\n\n

I was drinking coffee when I read the news on Chrome prototyping functions in CSS and… I didn’t spit it or anything. I was excited, but thought “functions” in CSS would be just like mixins in Sass<\/a> \u2014 you know, patterns for establishing reusable patterns. That’s cool but is really more or less syntactic sugar for writing less CSS.<\/p>\n\n\n\n

But I looked at the example snippet a little more closely and that’s when the coffee nearly came shooting out my mouth.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

From Bramus in Bluesky<\/a><\/p>\n\n\n\n

Arguments?! Return values?! That’s worth spitting my coffee out for! I had to learn more about them, and luckily, the spec is clearly written, which you can find right here<\/a>. What’s crazier, you can use functions right now in Chrome Canary! So, after reading and playing around, here are my key insights on what you need to know about CSS Functions.<\/p>\n\n\n

What exactly is a function in CSS?<\/h3>\n\n\n

I like this definition from the spec:<\/p>\n\n\n\n

\n

Custom functions allow authors the same power as custom properties, but parameterized<\/p>\n<\/blockquote>\n\n\n\n

They are used in the same places you would use a custom property, but functions return different things depending on the argument we pass. The syntax for the most basic function is the @function<\/code> at-rule, followed by the name of the function as a <dashed-ident><\/code> + ()<\/code><\/p>\n\n\n\n

@function --dashed-border() {\n \/* ... *\/\n}<\/code><\/pre>\n\n\n\n
A function without arguments is like a custom property, so meh… To make them functional <\/em>we can pass arguments inside the parenthesis, also as <dashed-ident><\/code>s<\/p>\n\n\n\n
@function --dashed-border(--color) {\n \/* ... *\/\n}<\/code><\/pre>\n\n\n\n
We can use the result<\/code> descriptor to return something based on our argument:<\/p>\n\n\n\n
@function --dashed-border(--color) {\n   result: 2px dashed var(--color);\n}\n\ndiv {\n   border: --dashed-border(blue); \/* 2px dashed blue *\/\n}<\/code><\/pre>\n\n\n\n
\n
We can even use defaults! Just write a colon (:<\/code>) followed by the default value for that argument.<\/p>\n\n\n\n
@function --dashed-border(--color: red) {\n   result: 2px dashed var(--color);\n}\n\ndiv {\n  border: --dashed-border(); \/* 2px dashed red *\/\n}<\/code><\/pre>\n\n\n\n