Understand mathematical functions in CSS
Tags: css, webdev, codenewbie, tutorial
Published: 2022-05-13 09:55:49

This post was originally published on [Hackmamba](https://hackmamba.io/blog/2022/05/understand-mathematical-functions-in-css/)

Most developers are not familiar with the mathematical functions of CSS. This function reduces the need for media queries, making it easier to create responsive websites.

We will discuss how to use the mathematical functions of CSS in this article. 

## Prerequisite

 To follow along with this article, we'll need:

- Basic HTML and CSS knowledge.
- A code editor to practice along, preferably Visual studio code. To download Visual studio code, [click here](https://code.visualstudio.com/download). 

## CSS Mathematical Functions

CSS mathematical functions perform different mathematical operations using different CSS values. These functions accept one or more values and return a single value. We use mathematical operators like `-` and `+` on the CSS values to get a new value for the CSS property.

## Types of CSS Mathematical Functions

There are four math functions well supported by CSS:

- The Calc() Function
- The Min() Function
- The Max() Function
- The clamp() Function


## The Calc() Function

The `calc()` function lets us calculate CSS property values using mathematical calculations. It accepts a specific expression as an input and returns the expression's output as the value.

This function comes in handy for designing responsive web pages and apps. 

The syntax for the `calc()` function is as follows:

```CSS
.class-name {
    property: calc(expression);
}
```
   

The expression combines different CSS values and mathematical operators, such as `-` and `+`.  

### Points to Remember Before Using the Calc() Function

Before using the `calc()` function, keep these things in mind:
 
1.
It is compulsory to use whitespaces around addition and subtraction operators. We can use multiplication and division with or without whitespace.

```CSS

  // Invalid
.class-name {
  property: calc(100% -70px);
} // It will read as a percentage followed by a negative length.
    
  // Valid
.class-name {
  property: calc(100% - 70px);
} // It will read as a percentage(%) followed by a subtraction 
  operator and a length.

```
 
2.
Both numbers must either have units or not have units for addition and subtraction.

```CSS
  // invalid
.class-name {
  property: calc(100% - 70);
}
  // Valid
.class-name {
  property: calc(100% - 70px);
  font-weight: calc(300 + 400);
}
```

3.
The calculation in the `calc()` function begins on the left and ends on the right. Division and multiplication come first, followed by addition and subtraction. We place a parenthesis() around the parts we want to solve first to override precedence.

4.
When using the `calc()` method to divide, the right-hand side must be a number without a unit attached to it. For multiplication, the location of the number does not matter. It can be on the left or right.

```CSS
  // Invalid
.class-name {
  property: calc(30px / 20px); 
  property: calc(5 / 20px);
  property: calc(300px * 2000px);
}
  // Valid
.class-name {
  property: calc(300px / 20);
  property: calc(2 * 300px); 
  property: calc(300px * 2); 
}
```

5.
We can also use `calc()` for only a part of a CSS attribute value or use it without doing a math calculation.

```CSS
.class-name {
  margin: 10px calc(200px / 10);
  width: calc(200px); // is the same as width: 200px;
}
```
  

### How Does the Calc() Function in CSS Work?

The following examples illustrate how to use `calc()`:

**Example 1:** Using `calc()` function with different units.

The `calc()` function allows us to combine different units, and it's not compulsory to use a specific unit. 

HTML Code:

```HTML
<div class="container">
  exercise
</div>
```
    
CSS Code:

```CSS
.container {
  text-align: center;
  background-color: crimson;
  color: white;
  font-size: 1.7em;
  font-weight: 700;
  padding: 3em;
  width: calc(100% - 100px);
}
```
Our output will be:

![Example 1 solution](https://paper-attachments.dropbox.com/s_24D7BE93B35330A6047A81A47D761CA7184C2E46FA9200E6C8987D451B77233F_1649327006795_100px.png)


We'll see a `100px` space by the right side of our browser. `calc(100% - 100px)`  will fill the entire width of `100%` except for `100px`.

What happens if we shift the above container to the middle?

When we shift the above container to the middle, the `100px` will divide in half, giving each side `50px`. We will have a margin of `50px` on the left and right. Add `margin: 2em auto;` to the above CSS code when practicing.

If we resize the browser, we will find that the container is responsive across all sizes. That's the beauty of using the `calc()` function. It is easier to create responsive layouts. 

**Example 2:** Nesting `calc()` function.

This function allows us to nest `calc()` functions. To nest `calc()` means to place one `calc()` inside of another.

```CSS
.container {
  // Instead of doing this
  height: calc(1000px - calc(200px + 400px));
  // Do this
  height: calc(1000px - (200px + 400px)); // The parent calc() can 
  function on its own.
} // Output will be 400px

```

**Example 3:** Using `calc()` function with CSS variables

One of `calc()`'s most convenient features is its ability to work with [CSS variables](https://cesscode.hashnode.dev/what-is-css-variable-in-simple-terms).

```CSS
  // Local scope
.container {
  --width: 100px;
  width: calc(var(--width) * 4); // The output will be 400px
}
```
    
## The Min() Function

The `min()` function lets us set the smallest acceptable value. It selects the smallest value from two or more values separated by a comma as the CSS property value.

The syntax for the `min()` function is as follows: 

```CSS
.class-name {
  property: min(value1, value2...); 
}
``` 

## Points to Remember Before Using the Min() Function.

1.
We can do math inside the `min()` function without using the `calc()` method. Maths in `min()` follow the same rules as maths in `calc()`. 

 ```CSS
.class-name {
  property: min(70px - 15px, 30px);
}
```

2.
The order in which the `min()` values appear has no bearing on the choice of the minimum value.

```CSS
.class-name {
  property: min(60%, 700px);
  // It is the same as
  property: min(700px, 60%);
}
```
 
### How Does the Min() Function in CSS Work?

The following examples illustrate how to use `min()`:

**Example 4:** Using  `min()` function with the width property.

HTML Code:

```HTML
<div class="container">
  CODE
</div>
```
   
CSS Code:

```CSS
.container { 
  background-color: crimson; 
  height: 200px; 
  width: min(60vw, 700px); 
  margin: 2em auto; 
  text-align: center; 
  padding: 2em; 
  font-size: 2rem; 
  color: white;
}
```

Our output will be:

![Example 4 solution](https://paper-attachments.dropbox.com/s_24D7BE93B35330A6047A81A47D761CA7184C2E46FA9200E6C8987D451B77233F_1649628575305_nine.PNG)


For example, 4:

- When we resize our browser, it checks the screen size and selects the smallest value from the list of values. 
- For example, on a large screen with a resolution of `1200px`, it chooses `700px` because it is the lower of the two values.
-  In cases when the screen size is less than `700px`, it selects `60vw` of the current screen size
- When the screen size is bigger than `700px` or reaches `700px`, it falls back to `700px`. It never exceeds `700px`

Example of how to calculate the viewport size for a `1200px` screen resolution:

- Using the VW format, `1vw` equals `1%` of the viewport (screen) size, not the parent element. So `60vw` is `60%` of the screen size of `1200px`
- `60vw / 100%` * `1200px` = `720`
- The `720` result in the above calculation is less than `700px`, so the large screen selects `700px`

Writing `width: min(60vw, 700px);` is the same as writing:

```CSS
  width: 60vw;
  max-width: 700px;
```
    

The `min()` function allows us to write our max-width and width in one parenthesis. It is an easy way to set the maximum value on any element.

**Example 5:** Using  `min()` function for font-sizes.

```CSS
.container {
  font-size: min(7rem, 2vw);
  color: grey;
}
```
  

The font size in the example above will never exceed `7rem` and will shrink or reduce to `2vw`  on smaller screens. Depending on the screen size, the font size will range between `2vw` and `7rem`.


## The Max() Function

By contrast, the `max()` function does the opposite of the `min()` function. It selects the largest value from two or more values separated by a comma as the CSS property value. 

 The syntax for the `max()` function is as follows: 
 
```CSS
.class-name {
  property: max(value1, value2...); // Parameters we pass into the 
  function
}
```
   
**NOTE:** The points to remember before using the `min()` also apply to the `max()` function. 

### How Does the Max() Function in CSS Work?

The following examples illustrate how to use `max()`:

**Example 6:** Using  `max()` function with the width property.

Replace the width in **example 4** with  `width: max(60%, 700px);`.
We will notice that:

- Based on the screen size, the max() function chooses the largest value between `60%` and `700px`. It never goes below `700px`, and it's responsive across all screen sizes
-  It selects `60%` on a large screen as it is the larger of the two value options

Writing `width: max(60%, 700px);` is the same as writing:

```CSS
  width: 60%;
  min-width: 700px;
```
    
The `max()` function allows us to write our min-width and width in one parenthesis. It is an easy way to set the minimum value on any element.

**Example 7:** Using `max()` function for font-sizes.

```CSS
.container {
  font-size: max(7rem, 2vw);
  color: grey;
}
```
   
The font size in the example above will never go below `2vw`. The font size will range between `2vw`  and `7rem`, depending on the screen size. It selects `7rem` on large screens and `2vw` on smaller screens. 

**NOTE:** For ease of understanding, always remember the `min()` sets a maximum width, and the `max()` sets a minimum width.


## The clamp() Function

CSS `clamp()` lets us set a property's value between a minimum and maximum. It's practically a combination of the `min()` and `max()` functions.

This function aims to prevent headers with huge fonts from taking up too much screen space. Our font-size values will adjust to fit all screen sizes with this function.

The syntax for the `clamp()` function is as follows:

```CSS
.class-name {
  property: clamp(minValue, preferredValue, maxValue);
}

```

This function only accepts three parameters, all of which must be in the correct order. 


- **The minValue:** The first value in the parentheses should always be the minimum value. It's the smallest value. The selection of the `minValue` occurs if the `preferredValue` is less than the `minValue`.
- **The preferredValue:** The preferred value is also called the default or ideal value. Preferred values are automatically selected if the value is between the min and max value. Suppose the default value is larger than the min value but less than the max value
- **The maxValue: **The last value in the parenthesis should always be the maximum value. It's the largest value. The selection of the `maxValue` will occur if the `preferredValue` is greater than the `maxValue`

### How does the Clamp() function in CSS work?

The following examples illustrate how to use `clamp()`:

**Example 8:** Using `clamp()` function with the width property.

```CSS

.container {
  background-color: grey;
  width: clamp(250px, 40vw, 800px); 
}
```
  
On a big screen resolution of 1400px:

- The `40vw` of our `1400px` screen resolution is `560px`
- The minimum width is `250px`
- The preferred or default value is `40vw`. If the width is larger than `250px` but less than `800px`, the browser will use the preferred value of `40vw`. So the width of the big screen will be `560px`
- The maximum width is `800px`. The width will not exceed `800px`. Depending on the screen resolution, it will range between `250px`, `40vw` and `800px`

**Example  9:** Using  `clamp()` function for font-sizes.

```CSS
.container {
  font-size: clamp(2rem, 2.5vw, 5rem);
  color: grey;
}
```
   
 For example, 9:

- The minimum font size is `2rem` while the maximum font size is `5rem` 
- The preferred font size is `2.5vw`. The font size will grow with the size of the screen. It will never go below `2rem` or exceed `5rem`

Check out this [online calculator](https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft?from-embed=&file=/src/App.js) for font size calculation with CSS `clamp()`. Enter the min and max font sizes, and the calculator will recommend a preferred font size.

**Note:** We can use any of the math functions for any CSS properties as long as they can accept a numerical value. Thus, CSS properties such as colors, paddings, margins, etc., will work with this function.

## Conclusion

This article has taught us how to use the different types of CSS math functions. We will be able to create faster and better responsive websites by using CSS math functions.

## Resources

Here are some resources that may be useful:

-  [W3schools CSS math functions](https://www.w3schools.com/css/css_math_functions.asp)
- [Kelvin Powells CSS math function video](https://www.youtube.com/watch?v=U9VF-4euyRo)
- [Linearly Scale font size with CSS clamp() Based on the Viewport](https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case)