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