Reduce rem by a percentage?

Question

OK I\'m using Foundations rem-calc to calculate a rem value, now i want to reduce the size of the variable on each media query by a percentage like so:

// This          


        

Answer 1

Sass won't let you perform arithmetic on values with incompatible units. However...

Percentages are just a different way of expressing decimals. To reduce something by 10% is to multiply it by 0.9 (formula: (100 - $my-percentage) / 100)).

.foo {
  font-size: 1.2rem * .9; // make it 10% smaller
}

Output:

.foo {
  font-size: 1.08rem;
}

Note that this works for increasing values by a percentage as well.

.foo {
  font-size: 1.2rem * 1.1; // make it 10% bigger
}

Output:

.foo {
  font-size: 1.32rem;
}