@use "sass:map"; @use "sass:meta"; // NOTE: Example map input: // $text-map: ( // 'default': ( // font-family: 'Inter', // font-size: 16px, // font-weight: 400, // ), // 'secondary': (∂ // font-family: 'Times New Roman', // font-size: 16px, // font-weight: 400, // ) // ); @function construct-styles($mixin-map, $mode) { $styles: map.get($mixin-map, $mode); @if $styles == null { $available-modes: map.keys($styles); @error "Invalid style mode: '#{$mode}' -> Available modes are: #{$available-modes}."; } @return $styles; } @mixin apply-style-map($mixin-map, $mode) { $styles: construct-styles($mixin-map, $mode); @each $property, $value in $styles { @if meta.type-of($value) == map { // This is a nested selector #{$property} { @each $nested-property, $nested-value in $value { #{$nested-property}: $nested-value; } } } @else { // This is a normal property-value pair #{$property}: $value; } } } // NOTE: Example map input: // $font-map: ( // 'default': 'Inter', // 'secondary': 'Times New Roman', // ) // ); @function construct-style($function-map, $mode) { // Check if the mode exists in the map $style-value: map.get($function-map, $mode); @if $style-value == null { $available-modes: map.keys($function-map); @error "Invalid style mode: '#{$mode}' -> Available modes are: #{$available-modes}."; } // Return the style value @return $style-value; } @function get-style($function-map, $mode) { $style: construct-style($function-map, $mode); @return $style; }