Skip to content

Instantly share code, notes, and snippets.

@tsvensen

tsvensen/get-multiplier.sass

Last active December 17, 2015 00:10
Download ZIP

Revisions

  1. tsvensen revised this gist May 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion get-multiplier.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ 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
    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;
  2. tsvensen revised this gist May 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion get-multiplier.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@ h1 {
    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) *1em; // multiply by 1em to add 'em' unit
    padding-bottom: get-multiplier(16, $font-size-h1) +em;
    }


  3. tsvensen revised this gist May 4, 2013. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions get-multiplier.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    // 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
    $font-size-h1: $font-size-base *2; // 32px

    h1 {
    font-size: $font-size-h1;
    @@ -33,5 +33,13 @@ h1 {
    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) *1em; // multiply by 1em to add 'em' unit
    padding-bottom: get-multiplier(16, $font-size-h1) *1em; // multiply by 1em to add 'em' unit
    }


    // PROCESSED
    h1 {
    font-size: 2em; // 32px
    line-height: 1.5; // 48px
    padding-bottom: .5em; // 16px
    }
  4. tsvensen revised this gist May 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion get-multiplier.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@
    // 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)) *1em;
    @return ($px-value / strip-units($current-font-size * $vertical-rhythm-base));
    // EXAMPLE 30px / ( 3em * 16px )
    // 30px / 48px
    // = .625
  5. tsvensen created this gist May 4, 2013.
    37 changes: 37 additions & 0 deletions get-multiplier.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    // 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)) *1em;
    // 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) *1em; // multiply by 1em to add 'em' unit
    }