44@use " sass:meta" ;
55@use " sass:string" ;
66
7+ @use " ../variables" as * ;
8+
79// SCSS RFS mixin
810//
911// Automated responsive values for font sizes, paddings, margins and much more
@@ -51,12 +53,12 @@ $rfs-rem-value: 16 !default;
5153$rfs-safari-iframe-resize-bug-fix : false !default ;
5254
5355// Disable RFS by setting $enable-rfs to false
54- $enable-rfs : true !default ;
56+ $enable-rfs : $enable-rfs !default ;
5557
5658// Cache $rfs-base-value unit
5759$rfs-base-value-unit : math .unit ($rfs-base-value );
5860
59- @function divide ($dividend , $divisor , $precision : 10 ) {
61+ @function rfs- divide ($dividend , $divisor , $precision : 10 ) {
6062 $sign : if ($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0 , 1 , -1 );
6163 $dividend : abs ($dividend );
6264 $divisor : abs ($divisor );
@@ -100,25 +102,25 @@ $rfs-base-value-unit: math.unit($rfs-base-value);
100102
101103// Remove px-unit from $rfs-base-value for calculations
102104@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 );
104106}
105107@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 ));
107109}
108110
109111// Cache $rfs-breakpoint unit to prevent multiple calls
110112$rfs-breakpoint-unit-cache : math .unit ($rfs-breakpoint );
111113
112114// Remove unit from $rfs-breakpoint for calculations
113115@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 );
115117}
116118@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 ));
118120}
119121
120122// 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 } );
122124$rfs-mq-property-width : if ($rfs-mode == max-media-query , max-width , min-width );
123125$rfs-mq-property-height : if ($rfs-mode == max-media-query , max-height , min-height );
124126
@@ -209,11 +211,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
209211
210212 @if $unit == px {
211213 // 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 );
213215 }
214216 @else if $unit == rem {
215217 // 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 );
217219 } @else {
218220 // 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
219221 $val : $val + " " + $value ;
@@ -245,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
245247 $val : $val + " " + $value ;
246248 } @else {
247249 // 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 )));
249251
250252 // Only add the media query if the value is greater than the minimum value
251253 @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 );
253255 }
254256 @else {
255257 // 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 );
257259
258260 // Calculate difference between $value and the minimum value
259261 $value-diff : abs ($value ) - $value-min ;
260262
261263 // 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 );
263265
264266 // Use negative value if needed
265267 $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
268270 $variable-unit : if ($rfs-two-dimensional , vmin , vw );
269271
270272 // 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 } ;
272274
273275 // Return the calculated value
274276 $val : $val + " calc(" + $min-width + if ($value < 0 , " - " , " + " ) + $variable-width + " )" ;
0 commit comments