With the help of the calc() function, we can do simple math right in our stylesheets.
This function is not the newest part of the CSS specs. Although it is a tiny part of our toolkit, it deserves a short introduction. Using calc() function is easy, you write up your mathematical operations and wrap them in the function.
div {
left: calc(50vh - 100px);
}
From this example, we can see a lot of things let’s discuss them!
What Does the Calc() Function Do?
In short, it makes it possible for us to make mathematical operations in your stylesheets. We can use the four basic mathematic operations: addition (+), subtraction (-), multiplication (*), division (/).
Addition and subtraction can be comfortable in a programing language, but in CSS, it was a problem. We only could use exact values. Even though it was a needed method here too, we only could use preprocessors but with more limitation.
Bazar is a powerful "headless" Laravel e-commerce system.
The Difference Between Calc() and Preprocessor Operations
The calc() function’s result happens at render time. It isn’t a real value; it is an expression. Hard to imagine this is you aren’t a front-end developer and don’t know about the browser’s rendering.
If you calculate something in Sass/SCSS, you get a value after the compile. Doing the same with calc() doesn’t give back the result of the operation (the result will be some kind of live value).
/* Preprocessor value */ width: 100% / 5; => width: 25%; /* CSS value */ width: calc(100% / 5); => width: calc(100% / 5);
The big deal is that with calc() your browser can calculate with different units. Which means you can combine relative (em, %, vw) units with fixed ones like px and so on.
Using calc()
It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values. There are some rule and information which are nice to know.
- We must surround the (+) and (-) operator with whitespace to work correctly. It is necessary because we can work with a negative value.
- In the case of multiplication and division, we can remove the whitespace, but for consistency, it is nice to have.
- We can’t divide with zero.
- We can embed calc into calc, but it will be treated as simple parentheses.
- The browser support is excellent, but the best idea to set up a simple fallback value if possible.
- The calc() function is helpful because it makes our code cleaner. It is nice to write this calc(100% / 3) than 33.33333%.
/* Fallback for the older browsers */
body {
font-size: 14px;
font-size: calc(100vw / 75);
}
If your calc() result breaks check your cache plugin or build tool. These tools like to remove the whitespace always (which is a problem with the addition and subtraction operator).
Sass Variable and CSS calc()
If you work with Sass you can also use a variable in a calc() function. For this you need to use interpolation like so:
$header_height: 100px;
.main {
height: calc(100% - #{$header_height});
}
Use Cases of calc() Function
There some everyday use case which can be helpful in our daily development flow.
Fixed Layout Element
If you want to make a fixed-width sidebar or header in your basic layout, you can calculate the remaining area of your site.
See the Pen
Fix Layout Position with calc() by Adam Laki (@adamlaki)
on CodePen.
This technique can be handy when you are making an admin template where you need a fixed sidebar which is always visible. For this, you make a sidebar with 260px width and set the rest of the layout width calc(100% – 260px).
Simplifying Absolute Centering
We all know that the most fundamental absolute centering is when we set 50% top and left value and pull back the element with both of the halves of the width and height with using the margins.
See the Pen
Absolute Centering with calc() by Adam Laki (@adamlaki)
on CodePen.
This centering technique is pretty outdated because of Flexbox (and because it works with fixed with), but it can be still useful and with calc() is a little bit simpler.
If you want to know more about the different types of centering in CSS, check out our other article!
Relative Font Size Based on Viewport Width
With the introduction of the vw and vh units, now we always can get our current viewport width and height. Knowing this can be useful when we want to make a responsive square, but it is also useful when we wish responsive font-size.
See the Pen
Pure CSS Responsive Font Size with Calc() Function by Adam Laki (@adamlaki)
on CodePen.
If you are interested in fluid typography, you can know more from CodePen collection!
Background Positioning to the Right Bottom
Using calc() we can calculate the right bottom of our element’s background with relative width like the following:
background-image: url(logo.png); background-position: calc(100% - 20px) calc(100% - 20px);
In this situation, the previous solution can be a fallback because now we have an even better solution. The background-position property can have two optional parameters which define the offset axis like this:
background-image: url(logo.png); background-position: right 20px bottom 20px;
