bourbon/core/bourbon/library/_modular-scale.scss at v7.3.0 · thoughtbot/bourbon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
@charset "UTF-8";

/// Increments up or down a defined scale and returns an adjusted value. This
/// helps establish consistent measurements and spacial relationships throughout
/// your project. We provide a list of commonly used scales as
/// [pre-defined variables][scales].
///
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss
///
/// @argument {number (unitless)} $increment
///   How many steps to increment up or down the scale.
///
/// @argument {number (with unit) | list} $value [1em]
///   The base value the scale starts at. Can also be set globally using the
///   `modular-scale-base` key in the Bourbon settings.
///
/// @argument {number (unitless)} $ratio [1.25]
///   The ratio the scale is built on. Can also be set globally using the
///   `modular-scale-ratio` key in the Bourbon settings.
///
/// @return {number (with unit)}
///
/// @example scss
///   .element {
///     font-size: modular-scale(2);
///   }
///
///   // CSS Output
///   .element {
///     font-size: 1.5625em;
///   }
///
/// @example scss
///   .element {
///     margin-right: modular-scale(3, 2em);
///   }
///
///   // CSS Output
///   .element {
///     margin-right: 3.90625em;
///   }
///
/// @example scss
///   .element {
///     font-size: modular-scale(3, 1em 1.6em, $major-seventh);
///   }
///
///   // CSS Output
///   .element {
///     font-size: 3em;
///   }
///
/// @example scss
///   // Globally change the base ratio
///   $bourbon: (
///     "modular-scale-ratio": 1.2,
///   );
///
///   .element {
///     font-size: modular-scale(3);
///   }
///
///   // CSS Output
///   .element {
///     font-size: 1.728em;
///   }
///
/// @require {function} _fetch-bourbon-setting

@function modular-scale(
  $increment,
  $value: _fetch-bourbon-setting("modular-scale-base"),
  $ratio: _fetch-bourbon-setting("modular-scale-ratio")
) {
  $v1: nth($value, 1);
  $v2: nth($value, length($value));
  $value: $v1;

  // scale $v2 to just above $v1
  @while $v2 > $v1 {
    $v2: ($v2 / $ratio); // will be off-by-1
  }
  @while $v2 < $v1 {
    $v2: ($v2 * $ratio); // will fix off-by-1
  }

  // check AFTER scaling $v2 to prevent double-counting corner-case
  $double-stranded: $v2 > $v1;

  @if $increment > 0 {
    @for $i from 1 through $increment {
      @if $double-stranded and ($v1 * $ratio) > $v2 {
        $value: $v2;
        $v2: ($v2 * $ratio);
      } @else {
        $v1: ($v1 * $ratio);
        $value: $v1;
      }
    }
  }

  @if $increment < 0 {
    // adjust $v2 to just below $v1
    @if $double-stranded {
      $v2: ($v2 / $ratio);
    }

    @for $i from $increment through -1 {
      @if $double-stranded and ($v1 / $ratio) < $v2 {
        $value: $v2;
        $v2: ($v2 / $ratio);
      } @else {
        $v1: ($v1 / $ratio);
        $value: $v1;
      }
    }
  }

  @return $value;
}