|
0
|
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/settings/_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.
|
|
|
15 ///
|
|
|
16 /// @argument {number (unitless)} $ratio [1.25]
|
|
|
17 /// The ratio the scale is built on.
|
|
|
18 ///
|
|
|
19 /// @return {number (with unit)}
|
|
|
20 ///
|
|
|
21 /// @example scss
|
|
|
22 /// .element {
|
|
|
23 /// font-size: modular-scale(2);
|
|
|
24 /// }
|
|
|
25 ///
|
|
|
26 /// // CSS Output
|
|
|
27 /// .element {
|
|
|
28 /// font-size: 1.5625em;
|
|
|
29 /// }
|
|
|
30 ///
|
|
|
31 /// @example scss
|
|
|
32 /// .element {
|
|
|
33 /// margin-right: modular-scale(3, 2em);
|
|
|
34 /// }
|
|
|
35 ///
|
|
|
36 /// // CSS Output
|
|
|
37 /// .element {
|
|
|
38 /// margin-right: 3.90625em;
|
|
|
39 /// }
|
|
|
40 ///
|
|
|
41 /// @example scss
|
|
|
42 /// .element {
|
|
|
43 /// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
|
|
|
44 /// }
|
|
|
45 ///
|
|
|
46 /// // CSS Output
|
|
|
47 /// .element {
|
|
|
48 /// font-size: 3em;
|
|
|
49 /// }
|
|
|
50 ///
|
|
|
51 /// @example scss
|
|
|
52 /// // Globally change the base ratio
|
|
|
53 /// $bourbon: (
|
|
|
54 /// "modular-scale-ratio": 1.2,
|
|
|
55 /// );
|
|
|
56 ///
|
|
|
57 /// .element {
|
|
|
58 /// font-size: modular-scale(3);
|
|
|
59 /// }
|
|
|
60 ///
|
|
|
61 /// // CSS Output
|
|
|
62 /// .element {
|
|
|
63 /// font-size: 1.728em;
|
|
|
64 /// }
|
|
|
65 ///
|
|
|
66 /// @require {function} _retrieve-bourbon-setting
|
|
|
67
|
|
|
68 @function modular-scale(
|
|
|
69 $increment,
|
|
|
70 $value: _retrieve-bourbon-setting("modular-scale-base"),
|
|
|
71 $ratio: _retrieve-bourbon-setting("modular-scale-ratio")
|
|
|
72 ) {
|
|
|
73
|
|
|
74 $v1: nth($value, 1);
|
|
|
75 $v2: nth($value, length($value));
|
|
|
76 $value: $v1;
|
|
|
77
|
|
|
78 // scale $v2 to just above $v1
|
|
|
79 @while $v2 > $v1 {
|
|
|
80 $v2: ($v2 / $ratio); // will be off-by-1
|
|
|
81 }
|
|
|
82 @while $v2 < $v1 {
|
|
|
83 $v2: ($v2 * $ratio); // will fix off-by-1
|
|
|
84 }
|
|
|
85
|
|
|
86 // check AFTER scaling $v2 to prevent double-counting corner-case
|
|
|
87 $double-stranded: $v2 > $v1;
|
|
|
88
|
|
|
89 @if $increment > 0 {
|
|
|
90 @for $i from 1 through $increment {
|
|
|
91 @if $double-stranded and ($v1 * $ratio) > $v2 {
|
|
|
92 $value: $v2;
|
|
|
93 $v2: ($v2 * $ratio);
|
|
|
94 } @else {
|
|
|
95 $v1: ($v1 * $ratio);
|
|
|
96 $value: $v1;
|
|
|
97 }
|
|
|
98 }
|
|
|
99 }
|
|
|
100
|
|
|
101 @if $increment < 0 {
|
|
|
102 // adjust $v2 to just below $v1
|
|
|
103 @if $double-stranded {
|
|
|
104 $v2: ($v2 / $ratio);
|
|
|
105 }
|
|
|
106
|
|
|
107 @for $i from $increment through -1 {
|
|
|
108 @if $double-stranded and ($v1 / $ratio) < $v2 {
|
|
|
109 $value: $v2;
|
|
|
110 $v2: ($v2 / $ratio);
|
|
|
111 } @else {
|
|
|
112 $v1: ($v1 / $ratio);
|
|
|
113 $value: $v1;
|
|
|
114 }
|
|
|
115 }
|
|
|
116 }
|
|
|
117
|
|
|
118 @return $value;
|
|
|
119 }
|
