Sass can perform all manner of mathematical conversions. Let's look at some simple examples:
.addition { width: 20% + 80%; }
When this is compiled, it results in this:
.addition { width: 100%; }
We can also do subtraction , multiplication, and division. Here's subtraction:
.subtraction { width: 80% - 20%; }
Which compiles to this:
.subtraction { width: 60%; }
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; }