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;
}

Answer 2

Had to pass the rem-calc after the math like so:

    $herotitle-size: 125.5;

   //To reduce by 10% 0.1
  .hero_home .herotitle{
       font-size: rem-calc( $herotitle-size - ( $herotitle-size * 0.1));
  }