themouette/fossil-core

View on GitHub
samples/todo/bourbon/functions/_modular-scale.scss

Summary

Maintainability
Test Coverage
@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