Sha256: 71c9daf69cf7d09cf00f5c9f4ed463de0569977091c221f813d5e097733dd4cc

Contents?: true

Size: 1.05 KB

Versions: 66

Compression:

Stored size: 1.05 KB

Contents

@function modular-scale($value, $increment, $ratio) {
  @if $increment > 0 {
    @for $i from 1 through $increment {
      $value: ($value * $ratio);
    }
  }

  @if $increment < 0 {
    $increment: abs($increment);
    @for $i from 1 through $increment {
      $value: ($value / $ratio);
    }
  }

  @return $value;
}

//  div {
//                     Increment Up GR with positive value
//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
//
//                     Increment Down GR with negative value
//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
//
//                     Can be used with ceil(round up) or floor(round down)
//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
//  }
//
// modularscale.com

@function golden-ratio($value, $increment) {
  @return modular-scale($value, $increment, 1.618)
}

//  div {
//    font-size: golden-ratio(14px, 1); // returns: 22.652px
//  }
//
// goldenratiocalculator.com

Version data entries

66 entries across 66 versions & 9 rubygems

Version Path
blocky-0.0.9 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.8 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.7 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.6 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.5 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.4 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.3 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.2 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
blocky-0.0.1 vendor/assets/stylesheets/blocky/bourbon/functions/_modular-scale.scss
refills-0.0.2 source/stylesheets/bourbon/functions/_modular-scale.scss
blogelator-0.2.3 vendor/assets/stylesheets/blogelator/bourbon/functions/_modular-scale.scss
blogelator-0.2.2 vendor/assets/stylesheets/blogelator/bourbon/functions/_modular-scale.scss
blogelator-0.2.1 vendor/assets/stylesheets/blogelator/bourbon/functions/_modular-scale.scss
refills-0.0.1 source/stylesheets/bourbon/functions/_modular-scale.scss
bourbon-compass-3.1.8 stylesheets/bourbon/functions/_modular-scale.scss
bourbon-3.1.8 app/assets/stylesheets/functions/_modular-scale.scss
bourbon-3.1.7 app/assets/stylesheets/functions/_modular-scale.scss
bourbon-compass-3.1.6 stylesheets/bourbon/functions/_modular-scale.scss
bourbon-3.1.6 app/assets/stylesheets/functions/_modular-scale.scss
bourbon-compass-3.1.5 stylesheets/bourbon/functions/_modular-scale.scss