Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bourbon/library/_modular-scale.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }