Unitless Line-height Issues about bitters HOT 6 CLOSED

@yulianglukhenko check out the strip units function in bourbon: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss and more importantly this thread in stack overflow: http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
The most important line there is:

You need to divide by 1 of the same unit.

So ($base-line-height * 0 + 1) is 1 and what ever the unit is (in your example it'd be pixels). Then $base-line-height / 1px would give you the unitless value of $base-line-height

$unitless-line-height: $base-line-height / $base-font-size; would give you 28px / 16px the result would be 1.75px which is not what we want the line-height to be.

from bitters.

I've tested this numerous times and it works for me; however, you can strip the units however is best for you. That's not the real issue here.

The real issue is the fact that the math is wrong. This: $unitless-line-height: $base-line-height / ($base-line-height * 0 + 1); would be this: 28px / 1 would be 28. A value of 28 for the line-height is 448px if the font size is 16px. Please fix this as it's not usable the way it's set up now.

from bitters.

@yulianglukhenko Except the $base-font-size in Bitters isn't 16px it's 1em so the math comes out to 1.75 for Bitters out of the box. Is your issue that you think that if you change the value for $base-font-size that you shouldn't have to change the values for $base-line-height and $unitless-line-height?

from bitters.

Damn.. that's my issue. Completely forgot that base-font-size is 1em out of the box. Thanks for the explanation and sorry for the hassle.

from bitters.

@yulianglukhenko No problem. You've pointed out an issue with some of those variables which is a good thing. There is a long discussion on $unitless-line-height over here: #80 (diff)

It is probably going to change.

Is there a reason that you aren't using ems? Or event the em() function in Bourbon?

from bitters.

I usually do for simple websites. However, the web app I'm currently working on was designed by a print designer and has a lot of weirdly positioned elements that need to have strict font-sizes. Since this will be a responsive app, the decision was made to go with px instead of em.

from bitters.