CODEWITHSUNDEEP
csssasszurb-foundation
vimes1984
vimes1984

Reputation: 1693

Reduce rem by a percentage?

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 is the default html and body font-size for the 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 from 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 it doesn't work.... why?

Upvotes: 0

Views: 2393

Answers (2)

cimmanon
cimmanon

Reputation: 68339

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

Upvotes: 3

vimes1984
vimes1984

Reputation: 1693

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

Upvotes: 0

Related Questions