Skip to content

Instantly share code, notes, and snippets.

@tsvensen
Last active December 17, 2015 00:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsvensen/5519129 to your computer and use it in GitHub Desktop.
Save tsvensen/5519129 to your computer and use it in GitHub Desktop.
get-multiplier() & strip-units() bonus. For setting line-height and EM values, specifically for vertical rhythms. This is different from the px to em functions out there.
// strip-units()
// Remove units from a Sass value with units (em, px, etc.)
// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass#answer-12335841
// EXAMPLE
// strip-units($my-var);
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// get-multiplier()
// Get the multiplier for the pixel value divided by the current/contextual font size
// Requires $vertical-rhythm-base variable to be set, should be unitless
// EXAMPLE
// get-multiplier(24, $font-size-h4);
@function get-multiplier($px-value, $current-font-size) {
@return ($px-value / strip-units($current-font-size * $vertical-rhythm-base));
// EXAMPLE 30px / ( 3em * 16px )
// 30px / 48px
// = .625
}
// USAGE
$vertical-rhythm-base: 16; // 16px, should be unitless
$font-size-base: 1em; // 1em = 16px base font size (set by browser)
$font-size-h1: $font-size-base *2; // 32px
h1 {
font-size: $font-size-h1;
// get the 48px muplitplier value with the h1 font size context as EMs
line-height: get-multiplier(48, $font-size-h1); // line heights should be unitless: http://www.w3.org/wiki/CSS/Properties/line-height#Description
// get the 16px multiplier value with the h1 font size context as EMs
padding-bottom: get-multiplier(16, $font-size-h1) +em;
}
// PROCESSED
h1 {
font-size: 2em; // 32px
line-height: 1.5; // 48px
padding-bottom: .5em; // 16px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment