Calculating Values Using Operations

Abstract

When writing CSS, we frequently create static rules for similar elements - while this works, it is certainly not the most efficient way of writing code! What if we could take it up a notch, and use maths to create our values dynamically?

Yes, you heard correctly: using maths! Before you run for the hills, this isn’t as crazy as it may seem - rather than have to manually work out the sizes of elements in a responsive layout, for example, we can instead use simple operators in Sass to work this out for us automatically. This is just one way of using basic maths in Sass, which makes it a really powerful tool - over the course of this chapter, we’ll work through some simple examples of maths that can really help save you time when it comes to developing in Sass.