css - Reduce rem by a percentage? -

ok i'm using foundations rem-calc calculate rem value, want reduce size of variable on each media query percentage so:

// default html , body font-size base rem value. $rem-base: 16px !default;  @function rem-calc($values, $base-value: $rem-base) {   $max: length($values);    @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }    $remvalues: ();   @for $i 1 through $max {     $remvalues: append($remvalues, convert-to-rem(nth($values, $i), $base-value));   }   @return $remvalues; }    $herotitle-size: rem-calc(125.5);     .hero_home .herotitle{     font-size: $herotitle-size / 10%;   } 

but doesn't work.... why?

sass won't let perform arithmetic on values incompatible units. however...

percentages different way of expressing decimals. reduce 10% multiply 0.9 (formula: (100 - $my-percentage) / 100)).

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

output:

.foo {   font-size: 1.08rem; } 

note works increasing values percentage well.

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

output:

.foo {   font-size: 1.32rem; }