assets/sass/bourbon/bourbon/library/_modular-scale.scss

   1 @charset "UTF-8";
   2
   3 /// Increments up or down a defined scale and returns an adjusted value. This
   4 /// helps establish consistent measurements and spacial relationships throughout
   5 /// your project. We provide a list of commonly used scales as
   6 /// [pre-defined variables][scales].
   7 ///
   8 /// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss
   9 ///
  10 /// @argument {number (unitless)} $increment
  11 ///   How many steps to increment up or down the scale.
  12 ///
  13 /// @argument {number (with unit) | list} $value [1em]
  14 ///   The base value the scale starts at. Can also be set globally using the
  15 ///   `modular-scale-base` key in the Bourbon settings.
  16 ///
  17 /// @argument {number (unitless)} $ratio [1.25]
  18 ///   The ratio the scale is built on. Can also be set globally using the
  19 ///   `modular-scale-ratio` key in the Bourbon settings.
  20 ///
  21 /// @return {number (with unit)}
  22 ///
  23 /// @example scss
  24 ///   .element {
  25 ///     font-size: modular-scale(2);
  26 ///   }
  27 ///
  28 ///   // CSS Output
  29 ///   .element {
  30 ///     font-size: 1.5625em;
  31 ///   }
  32 ///
  33 /// @example scss
  34 ///   .element {
  35 ///     margin-right: modular-scale(3, 2em);
  36 ///   }
  37 ///
  38 ///   // CSS Output
  39 ///   .element {
  40 ///     margin-right: 3.90625em;
  41 ///   }
  42 ///
  43 /// @example scss
  44 ///   .element {
  45 ///     font-size: modular-scale(3, 1em 1.6em, $major-seventh);
  46 ///   }
  47 ///
  48 ///   // CSS Output
  49 ///   .element {
  50 ///     font-size: 3em;
  51 ///   }
  52 ///
  53 /// @example scss
  54 ///   // Globally change the base ratio
  55 ///   $bourbon: (
  56 ///     "modular-scale-ratio": 1.2,
  57 ///   );
  58 ///
  59 ///   .element {
  60 ///     font-size: modular-scale(3);
  61 ///   }
  62 ///
  63 ///   // CSS Output
  64 ///   .element {
  65 ///     font-size: 1.728em;
  66 ///   }
  67 ///
  68 /// @require {function} _fetch-bourbon-setting
  69
  70 @function modular-scale(
  71   $increment,
  72   $value: _fetch-bourbon-setting("modular-scale-base"),
  73   $ratio: _fetch-bourbon-setting("modular-scale-ratio")
  74 ) {
  75   $v1: nth($value, 1);
  76   $v2: nth($value, length($value));
  77   $value: $v1;
  78
  79   // scale $v2 to just above $v1
  80   @while $v2 > $v1 {
  81     $v2: ($v2 / $ratio); // will be off-by-1
  82   }
  83   @while $v2 < $v1 {
  84     $v2: ($v2 * $ratio); // will fix off-by-1
  85   }
  86
  87   // check AFTER scaling $v2 to prevent double-counting corner-case
  88   $double-stranded: $v2 > $v1;
  89
  90   @if $increment > 0 {
  91     @for $i from 1 through $increment {
  92       @if $double-stranded and ($v1 * $ratio) > $v2 {
  93         $value: $v2;
  94         $v2: ($v2 * $ratio);
  95       } @else {
  96         $v1: ($v1 * $ratio);
  97         $value: $v1;
  98       }
  99     }
 100   }
 101
 102   @if $increment < 0 {
 103     // adjust $v2 to just below $v1
 104     @if $double-stranded {
 105       $v2: ($v2 / $ratio);
 106     }
 107
 108     @for $i from $increment through -1 {
 109       @if $double-stranded and ($v1 / $ratio) < $v2 {
 110         $value: $v2;
 111         $v2: ($v2 / $ratio);
 112       } @else {
 113         $v1: ($v1 / $ratio);
 114         $value: $v1;
 115       }
 116     }
 117   }
 118
 119   @return $value;
 120 }