{"id":12149,"date":"2026-01-01T20:37:49","date_gmt":"2026-01-01T20:37:49","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=12149"},"modified":"2026-01-01T20:37:49","modified_gmt":"2026-01-01T20:37:49","slug":"css-functions","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/css-functions\/","title":{"rendered":"CSS functions"},"content":{"rendered":"

CSS functions extend CSS to give it a more “programming language” set of features, i.e. we can create functions, with parameters, even add type safety and return values.<\/p>\n

Let’s start by looking at the basic syntax on a simple function which returns a given value depending on the “responsive design” size.<\/p>\n

\r\n@function --responsive(--sm, --md, --lg: no-value) {\r\n  result: var(--lg);\r\n\r\n  @media(width <= 600px) {\r\n    result: var(--sm);\r\n  }\r\n  @media(width > 600px) and (width <= 800px) {\r\n    result: var(--md);\r\n  }\r\n  @media(width > 800px) {\r\n    result: var(--lg);\r\n  }\r\n}\r\n<\/pre>\n
What’s happening here is the function is declared with the @function<\/em> and the name (in this case responsive<\/em>) is prefixed with — as are any parameters. Hence we have three parameters, the first is what’s return if the width is <= 600px and so on. The result:<\/em> is not quite equivalent to a return as it does not shortcut and return a value, instead if you set the result:<\/em> later then the last result is used as the “returned value”.<\/p>\n
Here’s an example of us setting a 200px square with different colours upon the different break points<\/p>\n
\r\ndiv {\r\n  width: 200px;\r\n  height: 200px;\r\n  background: --responsive(\r\n    blue,\r\n    green,\r\n    red);\r\n}\r\n<\/pre>\n
We can also supply default values to a function, for example we could set a default “no-value” using <\/p>\n
\r\n@function --responsive(--sm, --md, --lg: no-value)\r\n<\/pre>\n
Here’s an example of us setting other defaults with values<\/p>\n
\r\n@function --responsive(--sm: blue, --md: green, --lg: red)\r\n<\/pre>\n
Interestingly we can also make things type safe, for example let’s set each parameter as being a color and the return value also being of type color<\/p>\n
\r\n@function --responsive(--sm <color>: blue, --md <color>: green, --lg <color>: red) returns <color>\r\n<\/pre>\n
We can also supply multiple types, so let’s assume we want a –opacity function where the amount can be a percentage or number, then we might write something like<\/p>\n
\r\n@function --opacity(--color, --opacity type(<number> | <percentage>): 0.5) returns <color> {\r\n  result: rgb(from var(--color) r g b \/ var(--opacity));\r\n}\r\n<\/pre>\n
and in usage<\/p>\n
\r\ndiv {\r\n  width: 200px;\r\n  height: 200px;\r\n  background: --opacity(blue, 80%);\r\n  \/* background: --opacity(blue, 0.3); *\/\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
CSS functions extend CSS to give it a more “programming language” set of features, i.e. we can create functions, with parameters, even add type safety and return values. Let’s start by looking at the basic syntax on a simple function which returns a given value depending on the “responsive design” size. @function –responsive(–sm, –md, –lg: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-12149","post","type-post","status-publish","format-standard","hentry","category-css"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=12149"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12149\/revisions"}],"predecessor-version":[{"id":12152,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/12149\/revisions\/12152"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=12149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=12149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=12149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}