Menu
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?
795
CSS calc() It can be used to calculate length, percentage, time, number, integer frequency, or angle. It uses the four simple arithmetic operators add (+), multiply (*), subtract (-), and divide (/). It is a powerful CSS concept because it allows us to mix any units, such as percentage and pixel.
SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax.
Sass supports the standard set of mathematical operators for numbers. They automatically convert between compatible units. <expression> + <expression> adds the first expression's value to the second's.
Sass consists of two syntaxes.
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.
145
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?
8
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
