Math calculations with Sass

Sass can perform all manner of mathematical conversions. Let's look at some simple examples:

Addition

Here's addition:

.addition {
    width: 20% + 80%;
}

When this is compiled, it results in this:

.addition {
  width: 100%;
} 

Subtraction

We can also do subtraction , multiplication, and division. Here's subtraction:

.subtraction {
    width: 80% - 20%;
}

Which compiles to this:

.subtraction {
  width: 60%;
}

Multiplication

When it comes to multiplication and division with Sass, there are a few considerations. Although Sass can support various units (for example em, px, %), when a unit is declared on both values it gets a little upset. This is the wrong way to do multiplication:

.multiplication {
    width: 20px * 80px;
}

Instead, you need to provide the units on just one value. For example, amend the prior example to this:

.multiplication {
    width: 20 * 80px;
}

This would compile as you might expect:

.multiplication {
  width: 1600px;
}

Division

Those same rules apply to...