// Utility generator // Used to generate utilities & print utilities @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) { $values: map-get($utility, values); // If the values are a list or string, convert it into a map @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { $values: zip($values, $values); } @each $key, $value in $values { $properties: map-get($utility, property); // Multiple properties are possible, for example with vertical or horizontal margins or paddings @if type-of($properties) == "string" { $properties: append((), $properties); } // Use custom class if present $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if($property-class == null, "", $property-class); // Use custom CSS variable name if present, otherwise default to `class` $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class)); // State params to generate pseudo-classes $state: if(map-has-key($utility, state), map-get($utility, state), ()); $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); // Don't prefix if value key is null (e.g. with shadow class) $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); @if map-get($utility, rfs) { // Inside the media query @if $is-rfs-media-query { $val: rfs-value($value); // Do not render anything if fluid and non fluid values are the same $value: if($val == rfs-fluid-value($value), null, $val); } @else { $value: rfs-fluid-value($value); } } $is-css-var: map-get($utility, css-var); $is-local-vars: map-get($utility, local-vars); $is-rtl: map-get($utility, rtl); @if $value != null { @if $is-rtl == false { /* rtl:begin:remove */ } @if $is-css-var { .#{$property-class + $infix + $property-class-modifier} { --#{$prefix}#{$css-variable-name}: #{$value}; } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { --#{$prefix}#{$css-variable-name}: #{$value}; } } } @else { .#{$property-class + $infix + $property-class-modifier} { @each $property in $properties { @if $is-local-vars { @each $local-var, $variable in $is-local-vars { --#{$prefix}#{$local-var}: #{$variable}; } } #{$property}: $value if($enable-important-utilities, !important, null); } } @each $pseudo in $state { .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { @each $property in $properties { @if $is-local-vars { @each $local-var, $variable in $is-local-vars { --#{$prefix}#{$local-var}: #{$variable}; } } #{$property}: $value if($enable-important-utilities, !important, null); } } } } @if $is-rtl == false { /* rtl:end:remove */ } } } } // Helper functions and mixins for manipulating the utilities map // Gets the map of options for a given utility @function utilities-get-options($utility-name) { @return map-get($utilities, $utility-name); } // Gets the value of a specific option for a given utility @function utilities-get-option($utility-name, $option-name) { @return map-get( utilities-get-options($utility-name), $option-name ); } // Gets a specific value for the given utility @function utilities-get-value($utility-name, $value-name) { @return map-get( utility-get-option($utility-name, values), $value-name ); } // Set options for a given utility, merged with the existing ones by default. // To completely replace the existing options, set the 3rd `$merge` parameter to false @mixin utilities-set-options($utility-name, $options, $merge: true) { @if($merge) { $options: map-merge( utilities-get-options($utility-name), $options ) } $utilities: map-merge($utilities, $utility-name: $options ) } // Set a specific option to a new value for the given utility @mixin utilities-set-option($utility-name, $option-name, $value) { @include utilities-set-options($utility-name, ($option-name: $value)); } // Add new values to a given utility. // If you want to completely reconfigure the values // use `utility-set-option` to provide a new map // for the `values` option @mixin utilities-add-values($utility-name, $values) { @include utilities-set-option( $utility-name, values, map-merge( utility-get-option($utility-name, values), $values ) ) } // Remove specific values from a given utility @mixin utilities-remove-values($utility-name, $value-names...) { $values: utility-get-option($utility-name, values); $updated-values: map-remove($values, $value-names); @include utility-set-option($utility-name, values, $updated-values); } // Add a new utility to the utilities map @mixin utilities-add($utility-name, $utility) { $utilities: map-merge($utilities, ($utility-name: $utility) ); } // Remove a utility from the utilities map @mixin utilities-remove($utility-names...) { $utilities: map-remove($utility, $utility-names); }