Skip to content

Instantly share code, notes, and snippets.

@rejas
Forked from razwan/_baseline.scss
Last active August 29, 2015 14:01
Show Gist options
  • Save rejas/1e7fd8a5a6993bdff883 to your computer and use it in GitHub Desktop.
Save rejas/1e7fd8a5a6993bdff883 to your computer and use it in GitHub Desktop.
less-based version of sass-mixin from https://medium.com/p/e258fce47a9b
@base-font-size: 16px;
@base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
@cap-height: 0.68;
.baseline(@font-size, @scale: 2) {
// rhythm unit
@rhythm: @base-line-height * @font-size / @scale;
// number of rhythm units that can fit the font-size
@lines: ceil((@font-size + 0.001px) / @rhythm);
// calculate the new line-height
@line-height: @rhythm * @lines / @font-size;
// use the results
font-size: @font-size;
line-height: @line-height;
@baseline-distance: (@line-height - @cap-height) / 2;
/////////////////
// METHOD 1
//
// this method can relatively move down elements you may not want to
// position: relative;
// top: @baseline-distance + 0em;
/////////////////
// METHOD 2
// if you use this mixin only on elements that have one direction margins
// http://csswizardry.com/2012/06/single-direction-margin-declarations/
// you can use this method with no worries.
// this method assumes the direction is down and the margin is @base-line-height
padding-top: @baseline-distance;
margin-bottom: @base-line-height - @baseline-distance + 0em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment