As your CSS skills develop, you’ll find that many property values don’t need to be fixed numbers. CSS functions let you calculate values, compare alternatives, generate colours and images, reuse design values, and even retrieve information from your HTML.

In this worksheet, you’ll explore some of the most useful CSS functions — including calc(), min(), max(), clamp(), color-mix(), var(), and attr()— and see how they can help you create layouts that are responsive, adaptable, and easier to maintain. By the end, we hope you’ll see some potential in how these functions get you thinking less about fixed designs, and more in terms of relationships, constraints, and reusable design systems.

We often begin writing CSS by assigning literal values (“make this 300px”), but functions encourage you to describe how values should behave, which is a significant step towards writing modern CSS, and articulating how content might adapt in particular design situation.

</aside>

The word ‘function’ is something we’ll encounter a bit more of in JavaScript, but before we get there, we’re going to address what ‘functions’ are in CSS.

Typically, we think of CSS as having a bunch of fixed values, eg.

.card {
	width: 300px;
	font-size: 24px;
	margin: 20px;
}

CSS functions introduce the idea that CSS can calculate values. Instead of describing what a value is, you can describe how a value should be determined. Knowing that CSS allows you to do this becomes a big step towards responsive and adaptive design for the web. Let’s back up a bit and start with the simple question:…

What is a CSS function?

A CSS function is a piece of CSS that returns a value. Let’s do away with selectors and stuff for a second and just look at some CSS properties with functions as their values:

width: calc(100% - 2rem);

Here, calc() performs a calculation and returns a length. You could imagine it as asking the browser to work out the answer before applying it to the width property.

Many CSS functions simply generate a value that could have been typed directly. For example, instead of:

opacity: 0.5;

… you might express it as:

opacity: calc(1 / 2);

… where the browser calculates the result before assigning the value to the opacity property.

… but, like, isn’t that more work? Why write it in nine keystrokes when you could have written it in three?

</aside>

Yes. In this case, you make a valid point. But lets talk about some other scenarios where it might help us produce dynamic values, or do some more clever things beyond just calculating a value we could have typed in ourselves.

Since we just used it twice without even introducing it, let’s talk about one of the classic CSS functions to get us started: calc().