4
4
@use " sass:meta" ;
5
5
@use " sass:string" ;
6
6
7
+ @use " ../variables" as * ;
8
+
7
9
// SCSS RFS mixin
8
10
//
9
11
// Automated responsive values for font sizes, paddings, margins and much more
@@ -51,12 +53,12 @@ $rfs-rem-value: 16 !default;
51
53
$rfs-safari-iframe-resize-bug-fix : false !default ;
52
54
53
55
// Disable RFS by setting $enable-rfs to false
54
- $enable-rfs : true !default ;
56
+ $enable-rfs : $enable-rfs !default ;
55
57
56
58
// Cache $rfs-base-value unit
57
59
$rfs-base-value-unit : math .unit ($rfs-base-value );
58
60
59
- @function divide ($dividend , $divisor , $precision : 10 ) {
61
+ @function rfs- divide ($dividend , $divisor , $precision : 10 ) {
60
62
$sign : if ($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0 , 1 , -1 );
61
63
$dividend : abs ($dividend );
62
64
$divisor : abs ($divisor );
@@ -100,25 +102,25 @@ $rfs-base-value-unit: math.unit($rfs-base-value);
100
102
101
103
// Remove px-unit from $rfs-base-value for calculations
102
104
@if $rfs-base-value-unit == px {
103
- $rfs-base-value : divide ($rfs-base-value , $rfs-base-value * 0 + 1 );
105
+ $rfs-base-value : rfs- divide ($rfs-base-value , $rfs-base-value * 0 + 1 );
104
106
}
105
107
@else if $rfs-base-value-unit == rem {
106
- $rfs-base-value : divide ($rfs-base-value , divide ($rfs-base-value * 0 + 1 , $rfs-rem-value ));
108
+ $rfs-base-value : rfs- divide ($rfs-base-value , rfs- divide ($rfs-base-value * 0 + 1 , $rfs-rem-value ));
107
109
}
108
110
109
111
// Cache $rfs-breakpoint unit to prevent multiple calls
110
112
$rfs-breakpoint-unit-cache : math .unit ($rfs-breakpoint );
111
113
112
114
// Remove unit from $rfs-breakpoint for calculations
113
115
@if $rfs-breakpoint-unit-cache == px {
114
- $rfs-breakpoint : divide ($rfs-breakpoint , $rfs-breakpoint * 0 + 1 );
116
+ $rfs-breakpoint : rfs- divide ($rfs-breakpoint , $rfs-breakpoint * 0 + 1 );
115
117
}
116
118
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == " em" {
117
- $rfs-breakpoint : divide ($rfs-breakpoint , divide ($rfs-breakpoint * 0 + 1 , $rfs-rem-value ));
119
+ $rfs-breakpoint : rfs- divide ($rfs-breakpoint , rfs- divide ($rfs-breakpoint * 0 + 1 , $rfs-rem-value ));
118
120
}
119
121
120
122
// Calculate the media query value
121
- $rfs-mq-value : if ($rfs-breakpoint-unit == px , #{$rfs-breakpoint } px , #{divide ($rfs-breakpoint , $rfs-rem-value )}#{$rfs-breakpoint-unit } );
123
+ $rfs-mq-value : if ($rfs-breakpoint-unit == px , #{$rfs-breakpoint } px , #{rfs- divide ($rfs-breakpoint , $rfs-rem-value )}#{$rfs-breakpoint-unit } );
122
124
$rfs-mq-property-width : if ($rfs-mode == max-media-query , max-width , min-width );
123
125
$rfs-mq-property-height : if ($rfs-mode == max-media-query , max-height , min-height );
124
126
@@ -209,11 +211,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
209
211
210
212
@if $unit == px {
211
213
// Convert to rem if needed
212
- $val : $val + " " + if ($rfs-unit == rem , #{divide ($value , $value * 0 + $rfs-rem-value )} rem , $value );
214
+ $val : $val + " " + if ($rfs-unit == rem , #{rfs- divide ($value , $value * 0 + $rfs-rem-value )} rem , $value );
213
215
}
214
216
@else if $unit == rem {
215
217
// Convert to px if needed
216
- $val : $val + " " + if ($rfs-unit == px , #{divide ($value , $value * 0 + 1 ) * $rfs-rem-value } px , $value );
218
+ $val : $val + " " + if ($rfs-unit == px , #{rfs- divide ($value , $value * 0 + 1 ) * $rfs-rem-value } px , $value );
217
219
} @else {
218
220
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
219
221
$val : $val + " " + $value ;
@@ -245,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
245
247
$val : $val + " " + $value ;
246
248
} @else {
247
249
// Remove unit from $value for calculations
248
- $value : divide ($value , $value * 0 + if ($unit == px , 1 , divide (1 , $rfs-rem-value )));
250
+ $value : rfs- divide ($value , $value * 0 + if ($unit == px , 1 , rfs- divide (1 , $rfs-rem-value )));
249
251
250
252
// Only add the media query if the value is greater than the minimum value
251
253
@if abs ($value ) <= $rfs-base-value or not $enable-rfs {
252
- $val : $val + " " + if ($rfs-unit == rem , #{divide ($value , $rfs-rem-value )} rem , #{$value } px );
254
+ $val : $val + " " + if ($rfs-unit == rem , #{rfs- divide ($value , $rfs-rem-value )} rem , #{$value } px );
253
255
}
254
256
@else {
255
257
// Calculate the minimum value
256
- $value-min : $rfs-base-value + divide (abs ($value ) - $rfs-base-value , $rfs-factor );
258
+ $value-min : $rfs-base-value + rfs- divide (abs ($value ) - $rfs-base-value , $rfs-factor );
257
259
258
260
// Calculate difference between $value and the minimum value
259
261
$value-diff : abs ($value ) - $value-min ;
260
262
261
263
// Base value formatting
262
- $min-width : if ($rfs-unit == rem , #{divide ($value-min , $rfs-rem-value )} rem , #{$value-min } px );
264
+ $min-width : if ($rfs-unit == rem , #{rfs- divide ($value-min , $rfs-rem-value )} rem , #{$value-min } px );
263
265
264
266
// Use negative value if needed
265
267
$min-width : if ($value < 0 , - $min-width , $min-width );
@@ -268,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
268
270
$variable-unit : if ($rfs-two-dimensional , vmin , vw );
269
271
270
272
// Calculate the variable width between 0 and $rfs-breakpoint
271
- $variable-width : #{divide ($value-diff * 100 , $rfs-breakpoint )}#{$variable-unit } ;
273
+ $variable-width : #{rfs- divide ($value-diff * 100 , $rfs-breakpoint )}#{$variable-unit } ;
272
274
273
275
// Return the calculated value
274
276
$val : $val + " calc(" + $min-width + if ($value < 0 , " - " , " + " ) + $variable-width + " )" ;
0 commit comments