responsive-scale-mixins 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/index.scss +199 -6
- package/package.json +3 -4
- package/scss/_mixins.scss +0 -188
- package/scss/_variables.scss +0 -29
package/README.md
CHANGED
|
@@ -104,9 +104,9 @@ font-size: calc(var(--computed-scale-factor-px) * 40);
|
|
|
104
104
|
- **TypeScript Ready**: Compatible with CSS Modules and CSS-in-JS solutions
|
|
105
105
|
- **Universal Unit Support**: Handles all CSS units including absolute (px, pt, cm, mm, in, pc) and relative (%, em, rem, vw, vh, vmin, vmax) units
|
|
106
106
|
|
|
107
|
-
## 🔧
|
|
107
|
+
## 🔧 Package Structure
|
|
108
108
|
|
|
109
|
-
**Starting with v2.0.
|
|
109
|
+
**Starting with v2.0.7**, this package uses a **single-file distribution** for maximum compatibility. All mixins and functions are consolidated in `index.scss`, eliminating import dependency issues that could occur with NPM package distribution.
|
|
110
110
|
|
|
111
111
|
### Recommended Import Pattern
|
|
112
112
|
|
package/index.scss
CHANGED
|
@@ -1,8 +1,201 @@
|
|
|
1
|
-
// Responsive Scale Mixins
|
|
1
|
+
// Responsive Scale Mixins v2.0.8
|
|
2
2
|
// A powerful SCSS mixin system for creating perfectly responsive designs
|
|
3
|
+
// Single-file distribution for maximum compatibility
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
@use "sass:string";
|
|
6
|
+
@use "sass:meta";
|
|
7
|
+
@use "sass:list";
|
|
8
|
+
|
|
9
|
+
/* Responsive Scale Variables Mixin
|
|
10
|
+
* Include this mixin in your root element to define the scaling factors.
|
|
11
|
+
* Adjust the design widths to match your design system breakpoints.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@mixin responsive-scale-variables(
|
|
15
|
+
$desktop-width: 1920px,
|
|
16
|
+
$tablet-width: 768px,
|
|
17
|
+
$mobile-width: 390px
|
|
18
|
+
) {
|
|
19
|
+
// Design widths for direct calc expressions
|
|
20
|
+
--desktop-width: #{$desktop-width};
|
|
21
|
+
--tablet-width: #{$tablet-width};
|
|
22
|
+
--mobile-width: #{$mobile-width};
|
|
23
|
+
|
|
24
|
+
// Desktop scale factor (generic - unit is appended in calc expressions)
|
|
25
|
+
--computed-scale-factor: calc(100vw / #{$desktop-width});
|
|
26
|
+
|
|
27
|
+
// Tablet scale factor (generic - unit is appended in calc expressions)
|
|
28
|
+
--computed-tablet-scale-factor: calc(100vw / #{$tablet-width});
|
|
29
|
+
|
|
30
|
+
// Mobile scale factor (generic - unit is appended in calc expressions)
|
|
31
|
+
--computed-mobile-scale-factor: calc(100vw / #{$mobile-width});
|
|
32
|
+
|
|
33
|
+
// Tablet proportion scale factor for interpolation between mobile and desktop values
|
|
34
|
+
--tablet-proportion-scale-factor: calc(
|
|
35
|
+
(100vw - #{$mobile-width}) / (#{$desktop-width} - #{$mobile-width})
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Responsive Scale Mixins
|
|
40
|
+
* Core scaling functionality with support for all CSS units
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
@function scaled-value($val, $scale-var, $unit: px) {
|
|
44
|
+
@if $scale-var == "--computed-scale-factor" {
|
|
45
|
+
@return calc(100vw / var(--desktop-width) * #{$val}#{$unit});
|
|
46
|
+
} @else if $scale-var == "--computed-tablet-scale-factor" {
|
|
47
|
+
@return calc(100vw / var(--tablet-width) * #{$val}#{$unit});
|
|
48
|
+
} @else if $scale-var == "--computed-mobile-scale-factor" {
|
|
49
|
+
@return calc(100vw / var(--mobile-width) * #{$val}#{$unit});
|
|
50
|
+
} @else {
|
|
51
|
+
@return calc(var(#{$scale-var}) * #{$val}#{$unit});
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@function get-scale-factor($unit) {
|
|
56
|
+
// Use generic scale factor - unit is appended in calc expressions
|
|
57
|
+
@return string.unquote("--computed-scale-factor");
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@function get-tablet-scale-factor($unit) {
|
|
61
|
+
// Use generic scale factor - unit is appended in calc expressions
|
|
62
|
+
@return string.unquote("--computed-tablet-scale-factor");
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@function get-mobile-scale-factor($unit) {
|
|
66
|
+
// Use generic scale factor - unit is appended in calc expressions
|
|
67
|
+
@return string.unquote("--computed-mobile-scale-factor");
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@mixin responsive-scale(
|
|
71
|
+
$property,
|
|
72
|
+
$desktop-value,
|
|
73
|
+
$mobile-value,
|
|
74
|
+
$unit: px,
|
|
75
|
+
$is-percentage: false,
|
|
76
|
+
$desktop-relative: null,
|
|
77
|
+
$mobile-relative: null,
|
|
78
|
+
$important: null
|
|
79
|
+
) {
|
|
80
|
+
$scale-factor: get-scale-factor($unit);
|
|
81
|
+
|
|
82
|
+
// If it's a percentage-based value (like letter-spacing), scale it based on the relative property
|
|
83
|
+
@if $is-percentage == true {
|
|
84
|
+
@if $desktop-relative != null {
|
|
85
|
+
$calc-value: calc(
|
|
86
|
+
#{$desktop-value} /
|
|
87
|
+
100 *
|
|
88
|
+
100vw /
|
|
89
|
+
var(--desktop-width) *
|
|
90
|
+
#{$desktop-relative} *
|
|
91
|
+
#{$unit}
|
|
92
|
+
);
|
|
93
|
+
#{$property}: #{$calc-value}#{$important};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
97
|
+
@if $desktop-relative != null and $mobile-relative != null {
|
|
98
|
+
$calc-value: calc(
|
|
99
|
+
#{$mobile-value} /
|
|
100
|
+
100 *
|
|
101
|
+
(
|
|
102
|
+
100vw /
|
|
103
|
+
var(--tablet-width) *
|
|
104
|
+
(
|
|
105
|
+
#{$mobile-relative} +
|
|
106
|
+
(100vw - var(--mobile-width)) /
|
|
107
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
108
|
+
(#{$desktop-relative} - #{$mobile-relative})
|
|
109
|
+
) *
|
|
110
|
+
#{$unit}
|
|
111
|
+
)
|
|
112
|
+
);
|
|
113
|
+
#{$property}: #{$calc-value}#{$important};
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media screen and (max-width: 767px) {
|
|
118
|
+
@if $mobile-relative != null {
|
|
119
|
+
$calc-value: calc(
|
|
120
|
+
#{$mobile-value} /
|
|
121
|
+
100 *
|
|
122
|
+
100vw /
|
|
123
|
+
var(--mobile-width) *
|
|
124
|
+
#{$mobile-relative} *
|
|
125
|
+
#{$unit}
|
|
126
|
+
);
|
|
127
|
+
#{$property}: #{$calc-value}#{$important};
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
} @else {
|
|
131
|
+
// Regular absolute scaling
|
|
132
|
+
@if meta.type-of($desktop-value) == list {
|
|
133
|
+
$desktop-scaled: ();
|
|
134
|
+
@each $val in $desktop-value {
|
|
135
|
+
$desktop-scaled: list.append(
|
|
136
|
+
$desktop-scaled,
|
|
137
|
+
scaled-value($val, $scale-factor, $unit)
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
#{$property}: #{$desktop-scaled}#{$important};
|
|
141
|
+
} @else {
|
|
142
|
+
$scaled-value: scaled-value($desktop-value, $scale-factor, $unit);
|
|
143
|
+
#{$property}: #{$scaled-value}#{$important};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
147
|
+
@if meta.type-of($desktop-value) == list {
|
|
148
|
+
$tablet-scaled: ();
|
|
149
|
+
@for $i from 1 through list.length($desktop-value) {
|
|
150
|
+
$d-val: list.nth($desktop-value, $i);
|
|
151
|
+
$m-val: list.nth($mobile-value, $i);
|
|
152
|
+
$tablet-scaled: list.append(
|
|
153
|
+
$tablet-scaled,
|
|
154
|
+
calc(
|
|
155
|
+
100vw /
|
|
156
|
+
var(--tablet-width) *
|
|
157
|
+
(
|
|
158
|
+
#{$m-val} +
|
|
159
|
+
(100vw - var(--mobile-width)) /
|
|
160
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
161
|
+
(#{$d-val} - #{$m-val})
|
|
162
|
+
) *
|
|
163
|
+
#{$unit}
|
|
164
|
+
)
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
#{$property}: #{$tablet-scaled}#{$important};
|
|
168
|
+
} @else {
|
|
169
|
+
$calc-value: calc(
|
|
170
|
+
100vw /
|
|
171
|
+
var(--tablet-width) *
|
|
172
|
+
(
|
|
173
|
+
#{$mobile-value} +
|
|
174
|
+
(100vw - var(--mobile-width)) /
|
|
175
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
176
|
+
(#{$desktop-value} - #{$mobile-value})
|
|
177
|
+
) *
|
|
178
|
+
#{$unit}
|
|
179
|
+
);
|
|
180
|
+
#{$property}: #{$calc-value}#{$important};
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@media screen and (max-width: 767px) {
|
|
185
|
+
$mobile-scale-factor: get-mobile-scale-factor($unit);
|
|
186
|
+
@if meta.type-of($mobile-value) == list {
|
|
187
|
+
$mobile-scaled: ();
|
|
188
|
+
@each $val in $mobile-value {
|
|
189
|
+
$mobile-scaled: list.append(
|
|
190
|
+
$mobile-scaled,
|
|
191
|
+
scaled-value($val, $mobile-scale-factor, $unit)
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
#{$property}: #{$mobile-scaled}#{$important};
|
|
195
|
+
} @else {
|
|
196
|
+
$scaled-value: scaled-value($mobile-value, $mobile-scale-factor, $unit);
|
|
197
|
+
#{$property}: #{$scaled-value}#{$important};
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-scale-mixins",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"description": "🎨 Revolutionary SCSS mixins for perfect responsive design. Supports ALL CSS units (px, rem, em, vw, vh, %, etc.) with pixel-perfect scaling. Zero manual calculations - just flawless responsive typography, spacing, and dimensions across desktop, tablet, and mobile. Framework-agnostic, modern CSS variables, works everywhere.",
|
|
3
|
+
"version": "2.0.8",
|
|
4
|
+
"description": "🎨 Revolutionary SCSS mixins for perfect responsive design. Supports ALL CSS units (px, rem, em, vw, vh, %, etc.) with pixel-perfect scaling. Zero manual calculations - just flawless responsive typography, spacing, and dimensions across desktop, tablet, and mobile. Single-file distribution for maximum compatibility. Framework-agnostic, modern CSS variables, works everywhere.",
|
|
5
5
|
"main": "index.scss",
|
|
6
6
|
"style": "index.scss",
|
|
7
7
|
"sass": "index.scss",
|
|
@@ -57,8 +57,7 @@
|
|
|
57
57
|
},
|
|
58
58
|
"homepage": "https://github.com/Sidodus/responsive-scale-mixins.git#readme",
|
|
59
59
|
"files": [
|
|
60
|
-
"index.scss"
|
|
61
|
-
"scss/"
|
|
60
|
+
"index.scss"
|
|
62
61
|
],
|
|
63
62
|
"engines": {
|
|
64
63
|
"node": ">=12.0.0"
|
package/scss/_mixins.scss
DELETED
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
@use "sass:string";
|
|
2
|
-
@use "sass:meta";
|
|
3
|
-
@use "sass:list";
|
|
4
|
-
|
|
5
|
-
/* // ✅ Figma Proportions: Maintains the same proportions as the Figma design.
|
|
6
|
-
|
|
7
|
-
// // Here's a SCSS mixin that dynamically calculates font-size, line-height, padding, margins, and other scalable properties across desktop, tablet, and mobile screens.
|
|
8
|
-
// ✅ Consistent Scaling: No need to manually adjust for medium screens.
|
|
9
|
-
// ✅ Reusable: Works for font-size, line-height, margins, paddings, etc.
|
|
10
|
-
// ✅ Automatic Scaling: Dynamically scales values based on the screen size.
|
|
11
|
-
|
|
12
|
-
// 📌 How to Use It
|
|
13
|
-
// Import the mixins in your SCSS file: @import "~responsive-scale-mixins/scss/mixins";
|
|
14
|
-
// .title {
|
|
15
|
-
// @include responsive-scale(font-size, 40, 24);
|
|
16
|
-
// @include responsive-scale(padding, 20 73, 8 16); // Multi-value
|
|
17
|
-
// @include responsive-scale(line-height, 65, 40);
|
|
18
|
-
|
|
19
|
-
// // Letter-spacing is -1.5% of font-size
|
|
20
|
-
// @include responsive-scale(letter-spacing, -1.5, -1.5, px, true, 40, 24);
|
|
21
|
-
// }
|
|
22
|
-
|
|
23
|
-
// Parameters: property, desktop-value, mobile-value, unit (default px), is-percentage (default false), desktop-relative, mobile-relative, important (default null)
|
|
24
|
-
// Pass values as numbers (e.g., 20 for 20px, 20 73 for 20px 73px).
|
|
25
|
-
// Tablet values are automatically interpolated using the tablet-proportion-scale-factor.
|
|
26
|
-
// For percentage-based values, provide the percentage for desktop and mobile, and the base values (e.g., font-size for letter-spacing).
|
|
27
|
-
// Pass " !important" as the important parameter to append !important to the generated CSS rules.
|
|
28
|
-
// Media queries: Desktop (default), Tablet (768-991px), Mobile (≤767px). */
|
|
29
|
-
|
|
30
|
-
@function scaled-value($val, $scale-var, $unit: px) {
|
|
31
|
-
@if $scale-var == "--computed-scale-factor" {
|
|
32
|
-
@return calc(100vw / var(--desktop-width) * #{$val}#{$unit});
|
|
33
|
-
} @else if $scale-var == "--computed-tablet-scale-factor" {
|
|
34
|
-
@return calc(100vw / var(--tablet-width) * #{$val}#{$unit});
|
|
35
|
-
} @else if $scale-var == "--computed-mobile-scale-factor" {
|
|
36
|
-
@return calc(100vw / var(--mobile-width) * #{$val}#{$unit});
|
|
37
|
-
} @else {
|
|
38
|
-
@return calc(var(#{$scale-var}) * #{$val}#{$unit});
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@function get-scale-factor($unit) {
|
|
43
|
-
// Use generic scale factor - unit is appended in calc expressions
|
|
44
|
-
@return string.unquote("--computed-scale-factor");
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@function get-tablet-scale-factor($unit) {
|
|
48
|
-
// Use generic scale factor - unit is appended in calc expressions
|
|
49
|
-
@return string.unquote("--computed-tablet-scale-factor");
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@function get-mobile-scale-factor($unit) {
|
|
53
|
-
// Use generic scale factor - unit is appended in calc expressions
|
|
54
|
-
@return string.unquote("--computed-mobile-scale-factor");
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@mixin responsive-scale(
|
|
58
|
-
$property,
|
|
59
|
-
$desktop-value,
|
|
60
|
-
$mobile-value,
|
|
61
|
-
$unit: px,
|
|
62
|
-
$is-percentage: false,
|
|
63
|
-
$desktop-relative: null,
|
|
64
|
-
$mobile-relative: null,
|
|
65
|
-
$important: null
|
|
66
|
-
) {
|
|
67
|
-
$scale-factor: get-scale-factor($unit);
|
|
68
|
-
|
|
69
|
-
// If it's a percentage-based value (like letter-spacing), scale it based on the relative property
|
|
70
|
-
@if $is-percentage == true {
|
|
71
|
-
@if $desktop-relative != null {
|
|
72
|
-
$calc-value: calc(
|
|
73
|
-
#{$desktop-value} /
|
|
74
|
-
100 *
|
|
75
|
-
100vw /
|
|
76
|
-
var(--desktop-width) *
|
|
77
|
-
#{$desktop-relative} *
|
|
78
|
-
#{$unit}
|
|
79
|
-
);
|
|
80
|
-
#{$property}: #{$calc-value}#{$important};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
84
|
-
@if $desktop-relative != null and $mobile-relative != null {
|
|
85
|
-
$calc-value: calc(
|
|
86
|
-
#{$mobile-value} /
|
|
87
|
-
100 *
|
|
88
|
-
(
|
|
89
|
-
100vw /
|
|
90
|
-
var(--tablet-width) *
|
|
91
|
-
(
|
|
92
|
-
#{$mobile-relative} +
|
|
93
|
-
(100vw - var(--mobile-width)) /
|
|
94
|
-
(var(--desktop-width) - var(--mobile-width)) *
|
|
95
|
-
(#{$desktop-relative} - #{$mobile-relative})
|
|
96
|
-
) *
|
|
97
|
-
#{$unit}
|
|
98
|
-
)
|
|
99
|
-
);
|
|
100
|
-
#{$property}: #{$calc-value}#{$important};
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@media screen and (max-width: 767px) {
|
|
105
|
-
@if $mobile-relative != null {
|
|
106
|
-
$calc-value: calc(
|
|
107
|
-
#{$mobile-value} /
|
|
108
|
-
100 *
|
|
109
|
-
100vw /
|
|
110
|
-
var(--mobile-width) *
|
|
111
|
-
#{$mobile-relative} *
|
|
112
|
-
#{$unit}
|
|
113
|
-
);
|
|
114
|
-
#{$property}: #{$calc-value}#{$important};
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
} @else {
|
|
118
|
-
// Regular absolute scaling
|
|
119
|
-
@if meta.type-of($desktop-value) == list {
|
|
120
|
-
$desktop-scaled: ();
|
|
121
|
-
@each $val in $desktop-value {
|
|
122
|
-
$desktop-scaled: list.append(
|
|
123
|
-
$desktop-scaled,
|
|
124
|
-
scaled-value($val, $scale-factor, $unit)
|
|
125
|
-
);
|
|
126
|
-
}
|
|
127
|
-
#{$property}: #{$desktop-scaled}#{$important};
|
|
128
|
-
} @else {
|
|
129
|
-
$scaled-value: scaled-value($desktop-value, $scale-factor, $unit);
|
|
130
|
-
#{$property}: #{$scaled-value}#{$important};
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
134
|
-
@if meta.type-of($desktop-value) == list {
|
|
135
|
-
$tablet-scaled: ();
|
|
136
|
-
@for $i from 1 through list.length($desktop-value) {
|
|
137
|
-
$d-val: list.nth($desktop-value, $i);
|
|
138
|
-
$m-val: list.nth($mobile-value, $i);
|
|
139
|
-
$tablet-scaled: list.append(
|
|
140
|
-
$tablet-scaled,
|
|
141
|
-
calc(
|
|
142
|
-
100vw /
|
|
143
|
-
var(--tablet-width) *
|
|
144
|
-
(
|
|
145
|
-
#{$m-val} +
|
|
146
|
-
(100vw - var(--mobile-width)) /
|
|
147
|
-
(var(--desktop-width) - var(--mobile-width)) *
|
|
148
|
-
(#{$d-val} - #{$m-val})
|
|
149
|
-
) *
|
|
150
|
-
#{$unit}
|
|
151
|
-
)
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
#{$property}: #{$tablet-scaled}#{$important};
|
|
155
|
-
} @else {
|
|
156
|
-
$calc-value: calc(
|
|
157
|
-
100vw /
|
|
158
|
-
var(--tablet-width) *
|
|
159
|
-
(
|
|
160
|
-
#{$mobile-value} +
|
|
161
|
-
(100vw - var(--mobile-width)) /
|
|
162
|
-
(var(--desktop-width) - var(--mobile-width)) *
|
|
163
|
-
(#{$desktop-value} - #{$mobile-value})
|
|
164
|
-
) *
|
|
165
|
-
#{$unit}
|
|
166
|
-
);
|
|
167
|
-
#{$property}: #{$calc-value}#{$important};
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
@media screen and (max-width: 767px) {
|
|
172
|
-
$mobile-scale-factor: get-mobile-scale-factor($unit);
|
|
173
|
-
@if meta.type-of($mobile-value) == list {
|
|
174
|
-
$mobile-scaled: ();
|
|
175
|
-
@each $val in $mobile-value {
|
|
176
|
-
$mobile-scaled: list.append(
|
|
177
|
-
$mobile-scaled,
|
|
178
|
-
scaled-value($val, $mobile-scale-factor, $unit)
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
#{$property}: #{$mobile-scaled}#{$important};
|
|
182
|
-
} @else {
|
|
183
|
-
$scaled-value: scaled-value($mobile-value, $mobile-scale-factor, $unit);
|
|
184
|
-
#{$property}: #{$scaled-value}#{$important};
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
package/scss/_variables.scss
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/* Responsive Scale Variables Mixin
|
|
2
|
-
* Include this mixin in your root element to define the scaling factors.
|
|
3
|
-
* Adjust the design widths to match your design system breakpoints.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@mixin responsive-scale-variables(
|
|
7
|
-
$desktop-width: 1920px,
|
|
8
|
-
$tablet-width: 768px,
|
|
9
|
-
$mobile-width: 390px
|
|
10
|
-
) {
|
|
11
|
-
// Design widths for direct calc expressions
|
|
12
|
-
--desktop-width: #{$desktop-width};
|
|
13
|
-
--tablet-width: #{$tablet-width};
|
|
14
|
-
--mobile-width: #{$mobile-width};
|
|
15
|
-
|
|
16
|
-
// Desktop scale factor (generic - unit is appended in calc expressions)
|
|
17
|
-
--computed-scale-factor: calc(100vw / #{$desktop-width});
|
|
18
|
-
|
|
19
|
-
// Tablet scale factor (generic - unit is appended in calc expressions)
|
|
20
|
-
--computed-tablet-scale-factor: calc(100vw / #{$tablet-width});
|
|
21
|
-
|
|
22
|
-
// Mobile scale factor (generic - unit is appended in calc expressions)
|
|
23
|
-
--computed-mobile-scale-factor: calc(100vw / #{$mobile-width});
|
|
24
|
-
|
|
25
|
-
// Tablet proportion scale factor for interpolation between mobile and desktop values
|
|
26
|
-
--tablet-proportion-scale-factor: calc(
|
|
27
|
-
(100vw - #{$mobile-width}) / (#{$desktop-width} - #{$mobile-width})
|
|
28
|
-
);
|
|
29
|
-
}
|