Όταν εργάζεστε σε σύνθετες αρχιτεκτονικές Sass, δεν είναι ασυνήθιστο να χρησιμοποιείτε χάρτες Sass για τη διατήρηση της διαμόρφωσης και των επιλογών. Κατά διαστήματα, θα βλέπετε χάρτες μέσα σε χάρτες (πιθανώς σε διάφορα επίπεδα) όπως αυτός από το o-grid:
$o-grid-default-config: ( columns: 12, gutter: 10px, min-width: 240px, max-width: 1330px, layouts: ( S: 370px, // ≥20px columns M: 610px, // ≥40px columns L: 850px, // ≥60px columns XL: 1090px // ≥80px columns ), fluid: true, debug: false, fixed-layout: M, enhanced-experience: true );Το πρόβλημα με αυτούς τους χάρτες είναι ότι δεν είναι εύκολο να λάβετε και να ορίσετε τιμές από το ένθετο δέντρο. Αυτό είναι σίγουρα κάτι που θέλετε να αποκρύψετε μέσα στις λειτουργίες για να αποφύγετε να το κάνετε χειροκίνητα κάθε φορά.
Βαθιά
Στην πραγματικότητα, η δημιουργία μιας συνάρτησης για τη λήψη βαθιά ένθετων τιμών από έναν χάρτη είναι πολύ εύκολη.
/// Map deep get /// @author Hugo Giraudel /// @access public /// @param (Map) $map - Map /// @param (Arglist) $keys - Key chain /// @return (*) - Desired value @function map-deep-get($map, $keys… ) ( @each $key in $keys ( $map: map-get($map, $key); ) @return $map; )Για παράδειγμα, εάν θέλουμε να συνδέσουμε την τιμή με τη Mδιάταξη από τον χάρτη διαμόρφωσης, είναι τόσο εύκολο όσο:
$m-breakpoint: map-deep-get($o-grid-default-config, "layouts", "M"); // 610pxΣημειώστε ότι τα εισαγωγικά γύρω από χορδές είναι προαιρετικά. Τους προσθέτουμε μόνο για προβλήματα αναγνωσιμότητας.
Βαθύ σετ
Από την άλλη πλευρά, η δημιουργία μιας συνάρτησης για τη ρύθμιση ενός κλειδιού με έντονη ένθεση μπορεί να είναι πολύ κουραστική.
/// Deep set function to set a value in nested maps /// @author Hugo Giraudel /// @access public /// @param (Map) $map - Map /// @param (List) $keys - Key chaine /// @param (*) $value - Value to assign /// @return (Map) @function map-deep-set($map, $keys, $value) ( $maps: ($map,); $result: null; // If the last key is a map already // Warn the user we will be overriding it with $value @if type-of(nth($keys, -1)) == "map" ( @warn "The last key you specified is a map; it will be overrided with `#($value)`."; ) // If $keys is a single key // Just merge and return @if length($keys) == 1 ( @return map-merge($map, ($keys: $value)); ) // Loop from the first to the second to last key from $keys // Store the associated map to this key in the $maps list // If the key doesn't exist, throw an error @for $i from 1 through length($keys) - 1 ( $current-key: nth($keys, $i); $current-map: nth($maps, -1); $current-get: map-get($current-map, $current-key); @if $current-get == null ( @error "Key `#($key)` doesn't exist at current level in map."; ) $maps: append($maps, $current-get); ) // Loop from the last map to the first one // Merge it with the previous one @for $i from length($maps) through 1 ( $current-map: nth($maps, $i); $current-key: nth($keys, $i); $current-val: if($i == length($maps), $value, $result); $result: map-merge($current-map, ($current-key: $current-val)); ) // Return result @return $result; )Τώρα, εάν θέλουμε να ενημερώσουμε την τιμή που σχετίζεται με τη Mδιάταξη από τον χάρτη διαμόρφωσης, μπορούμε να κάνουμε:
$o-grid-default-config: map-deep-set($o-grid-default-config, "layouts" "M", 650px);Επιπλέον πόροι
Η παραπάνω λειτουργία δεν είναι η μόνη λύση σε αυτό το πρόβλημα.
Η βιβλιοθήκη Sassy-Maps παρέχει επίσης map-deep-setκαι map-deep-getλειτουργεί. Κατά τον ίδιο τρόπο, ο Hugo Giraudel έγραψε επίσης μια extendλειτουργία σε στυλ jQuery για να κάνει το ενσωματωμένο map-mergeαναδρομικό και ικανό να συγχωνεύσει περισσότερους από 2 χάρτες ταυτόχρονα.