12

i'm quite confused at the moment when it comes to calculating a font-size

this is the normal calculation I already use.

font-size: #{($font-size*0.7) / $em}em

What I wanna do now is divide an entire statement like the one above with another one … sounds complicated I know.

So I have #{($font-size*0.7) / $em} And I have #{($font-size*0.8125) / $em}

I want to devide those two values now …

So font-size: #{($font-size*0.7) / $em} / #{($font-size*0.8125) / $em}em.

But that doesn't work. Any idea how I do a calculation like that with SASS?

matt
  • 42,713
  • 103
  • 264
  • 397

2 Answers2

25

Try:

font-size: #{(($font-size*0.7) / $em) / (($font-size*0.8125) / $em)}em

The interpolation back into a string #{...} should be the last thing done after the calculations.

ScottS
  • 71,703
  • 13
  • 126
  • 146
9

ScottS answer appears to be technically correct, but why do you even need such a complex expression in the first place? Expressed as a fraction, this can be simplified to

($font-size * 0.7 / $em) / ($font-size * 0.8125 / $em) = 0.7 / 0.8125

And your final expression would be

font-size: #{(0.7/0.8125)}em

...wouldn't it?

Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 1
    +1 for an excellent point. I totally missed the fact that the order of operations and values used here allowed it to reduce. Indeed, even your answer could probably be practically reduced further to something like: `font-size: 0.86153em` (or whatever rounding one wanted), having the fraction already precalculated, which takes out both the division and need to do the interpolation back to a string. – ScottS Aug 03 '12 at 11:04
  • @ScottS: you're right, I've just assumed that the decimal fractions would end up being replaced by variables – Oleg Aug 04 '12 at 05:40