77// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
88
99// Configuration
10+ @use " sass:math" ;
1011
1112// Base value
1213$rfs-base-value : 1.25rem !default ;
@@ -54,7 +55,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
5455
5556@function divide ($dividend , $divisor , $precision : 10 ) {
5657 $sign : if ($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0 , 1 , -1 );
57- $dividend : abs ($dividend );
58+ $dividend : math . abs ($dividend );
5859 $divisor : abs ($divisor );
5960 @if $dividend == 0 {
6061 @return 0 ;
@@ -72,7 +73,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
7273 $quotient : $quotient + 1 ;
7374 }
7475 $result : $result * 10 + $quotient ;
75- $factor : $factor * .1 ;
76+ $factor : $factor * 0 .1 ;
7677 $remainder : $remainder * 10 ;
7778 $precision : $precision - 1 ;
7879 @if ($precision < 0 and $remainder >= $divisor * 5 ) {
@@ -86,7 +87,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
8687 " px" : 1px ,
8788 " rem" : 1rem ,
8889 " em" : 1em ,
89- " %" : 1%
90+ " %" : 1% ,
9091 );
9192 @if ($dividend-unit != $divisor-unit and map-has-key ($unit-map , $dividend-unit )) {
9293 $result : $result * map-get ($unit-map , $dividend-unit );
@@ -97,8 +98,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
9798// Remove px-unit from $rfs-base-value for calculations
9899@if $rfs-base-value-unit == px {
99100 $rfs-base-value : divide ($rfs-base-value , $rfs-base-value * 0 + 1 );
100- }
101- @else if $rfs-base-value-unit == rem {
101+ } @else if $rfs-base-value-unit == rem {
102102 $rfs-base-value : divide ($rfs-base-value , divide ($rfs-base-value * 0 + 1 , $rfs-rem-value ));
103103}
104104
@@ -108,8 +108,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
108108// Remove unit from $rfs-breakpoint for calculations
109109@if $rfs-breakpoint-unit-cache == px {
110110 $rfs-breakpoint : divide ($rfs-breakpoint , $rfs-breakpoint * 0 + 1 );
111- }
112- @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == " em" {
111+ } @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == " em" {
113112 $rfs-breakpoint : divide ($rfs-breakpoint , divide ($rfs-breakpoint * 0 + 1 , $rfs-rem-value ));
114113}
115114
@@ -125,14 +124,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
125124 @media (#{$rfs-mq-property-width }: #{$rfs-mq-value } ), (#{$rfs-mq-property-height }: #{$rfs-mq-value } ) {
126125 @content ;
127126 }
128- }
129- @else {
127+ } @else {
130128 @media (#{$rfs-mq-property-width }: #{$rfs-mq-value } ) and (#{$rfs-mq-property-height }: #{$rfs-mq-value } ) {
131129 @content ;
132130 }
133131 }
134- }
135- @else {
132+ } @else {
136133 @media (#{$rfs-mq-property-width }: #{$rfs-mq-value } ) {
137134 @content ;
138135 }
@@ -148,21 +145,18 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
148145 & .disable-rfs {
149146 @content ;
150147 }
151- }
152- @else if $rfs-class == enable and $rfs-mode == min- media- query {
148+ } @else if $rfs-class == enable and $rfs-mode == min- media- query {
153149 .enable-rfs & ,
154150 & .enable-rfs {
155151 @content ;
156152 }
157- }
158- @else {
153+ } @else {
159154 @content ;
160155 }
161156}
162157
163158// Internal mixin that adds enable classes to the selector if needed.
164159@mixin _rfs-media-query-rule {
165-
166160 @if $rfs-class == enable {
167161 @if $rfs-mode == min- media- query {
168162 @content ;
@@ -174,8 +168,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
174168 @content ;
175169 }
176170 }
177- }
178- @else {
171+ } @else {
179172 @if $rfs-class == disable and $rfs-mode == min- media- query {
180173 .disable-rfs & ,
181174 & .disable-rfs {
@@ -191,30 +184,27 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
191184// Helper function to get the formatted non-responsive value
192185@function rfs-value ($values ) {
193186 // Convert to list
194- $values : if (type-of ($values ) != list , ($values , ), $values );
187+ $values : if (type-of ($values ) != list , ($values ), $values );
195188
196- $val : ' ' ;
189+ $val : " " ;
197190
198191 // Loop over each value and calculate value
199192 @each $value in $values {
200193 @if $value == 0 {
201- $val : $val + ' 0' ;
202- }
203- @else {
194+ $val : $val + " 0" ;
195+ } @else {
204196 // Cache $value unit
205197 $unit : if (type-of ($value ) == " number" , unit ($value ), false );
206198
207199 @if $unit == px {
208200 // Convert to rem if needed
209- $val : $val + ' ' + if ($rfs-unit == rem , #{divide ($value , $value * 0 + $rfs-rem-value )} rem , $value );
210- }
211- @else if $unit == rem {
201+ $val : $val + " " + if ($rfs-unit == rem , #{divide ($value , $value * 0 + $rfs-rem-value )} rem , $value );
202+ } @else if $unit == rem {
212203 // Convert to px if needed
213- $val : $val + ' ' + if ($rfs-unit == px , #{divide ($value , $value * 0 + 1 ) * $rfs-rem-value } px , $value );
214- }
215- @else {
204+ $val : $val + " " + if ($rfs-unit == px , #{divide ($value , $value * 0 + 1 ) * $rfs-rem-value } px , $value );
205+ } @else {
216206 // 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
217- $val : $val + ' ' + $value ;
207+ $val : $val + " " + $value ;
218208 }
219209 }
220210 }
@@ -226,34 +216,29 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
226216// Helper function to get the responsive value calculated by RFS
227217@function rfs-fluid-value ($values ) {
228218 // Convert to list
229- $values : if (type-of ($values ) != list , ($values , ), $values );
219+ $values : if (type-of ($values ) != list , ($values ), $values );
230220
231- $val : ' ' ;
221+ $val : " " ;
232222
233223 // Loop over each value and calculate value
234224 @each $value in $values {
235225 @if $value == 0 {
236- $val : $val + ' 0' ;
237- }
238-
239- @else {
226+ $val : $val + " 0" ;
227+ } @else {
240228 // Cache $value unit
241229 $unit : if (type-of ($value ) == " number" , unit ($value ), false );
242230
243231 // 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
244232 @if not $unit or $unit != px and $unit != rem {
245- $val : $val + ' ' + $value ;
246- }
247-
248- @else {
233+ $val : $val + " " + $value ;
234+ } @else {
249235 // Remove unit from $value for calculations
250236 $value : divide ($value , $value * 0 + if ($unit == px , 1 , divide (1 , $rfs-rem-value )));
251237
252238 // Only add the media query if the value is greater than the minimum value
253239 @if abs ($value ) <= $rfs-base-value or not $enable-rfs {
254- $val : $val + ' ' + if ($rfs-unit == rem , #{divide ($value , $rfs-rem-value )} rem , #{$value } px );
255- }
256- @else {
240+ $val : $val + " " + if ($rfs-unit == rem , #{divide ($value , $rfs-rem-value )} rem , #{$value } px );
241+ } @else {
257242 // Calculate the minimum value
258243 $value-min : $rfs-base-value + divide (abs ($value ) - $rfs-base-value , $rfs-factor );
259244
@@ -273,7 +258,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
273258 $variable-width : #{divide ($value-diff * 100 , $rfs-breakpoint )}#{$variable-unit } ;
274259
275260 // Return the calculated value
276- $val : $val + ' calc(' + $min-width + if ($value < 0 , ' - ' , ' + ' ) + $variable-width + ' ) ' ;
261+ $val : $val + " calc(" + $min-width + if ($value < 0 , " - " , " + " ) + $variable-width + " ) " ;
277262 }
278263 }
279264 }
@@ -292,8 +277,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
292277 // Do not print the media query if responsive & non-responsive values are the same
293278 @if $val == $fluidVal {
294279 #{$property } : $val ;
295- }
296- @else {
280+ } @else {
297281 @include _rfs-rule {
298282 #{$property } : if ($rfs-mode == max-media-query , $val , $fluidVal );
299283
0 commit comments