Keep height consistent without setting a height
A good example is add-ons to form inputs. Sometimes they might be buttons and sometimes just a simple symbol in a container.
One answer might be to simply set a height on the element. This is bad for two reasons:
- The element might not wrap text correctly
- Padding and line-height can cause cross browsers issues when mixed with heights.
(gist: https://gist.github.com/craigmdennis/541cf12d88209bf76c97 file:SassMeister-input.scss)
Why not set the line-height to 1 to make the calculation easier?
When the line-height is set to one, the descenders of the type actually protrude and can get cut off if
overflow: hidden; is applied. The text will also be squashed together if the element does wrap.
The mixin finds the next multiple of the baseline (4 by default) and uses that as the desired line-height.
So if you specify
13px as your font size, the mixin will use
16px as the line-height and convert it into a unit-less value.
It then takes the remaining space available from the height specified, halves it, and applies that to the top and bottom padding.
Rems and px
Not only does the mixin do the heavy lifting calculations for you but it also doesn’t care whether you use
px for the input values. You can also specify whether you want either to be the output (rems are default).
There is only an issue with SASS’ decimal point precision.
By default SASS uses 5 decimal points but when using values that don’t divide easily by each other you can end up with a recurring number.
The precision needs to be at least 7 decimal points for browsers to correctly round to the correct pixel display.
@craigmdennis If they supported it in some way as configurable directly in the authored code, we could support it =)— CodePen.IO (@CodePen) March 23, 2015
Unfortunately CodePen doesn't support this so some values have been overridden manually
Fixing SASS precision:
- Pass in the precision flag when compiling
- Increase the precision in Compass
- Use gulp-ruby-sass and specify