| 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 | } |