Deep Get / Set u Mapama CSS-trikovi

Kada radite na složenim Sassovim arhitekturama, nije rijetkost koristiti Sassove mape za održavanje konfiguracije i opcija. Povremeno ćete vidjeti karte unutar karata (moguće na nekoliko razina) poput ove iz 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 );

Problem takvih karata je što nije lako dobiti i postaviti vrijednosti iz ugniježđenog stabla. To je definitivno nešto što želite sakriti unutar funkcija kako biste izbjegli ručni rad svaki put.

Duboko se

Zapravo je izgradnja funkcije za dohvaćanje duboko ugniježđenih vrijednosti s karte vrlo jednostavna.

/// 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; )

Na primjer, ako želimo dobiti vrijednost povezanu s Mizgledom s naše konfiguracijske karte, to je jednostavno kao:

$m-breakpoint: map-deep-get($o-grid-default-config, "layouts", "M"); // 610px

Napominjemo da navodnici oko nizova nisu obvezni. Dodamo ih samo radi brige o čitljivosti.

Duboko postavljen

S druge strane, izgradnja funkcije za postavljanje duboko ugniježđenog ključa može biti vrlo zamorna.

/// 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; )

Sada ako želimo ažurirati vrijednost povezanu s Mizgledom s naše konfiguracijske karte, možemo učiniti:

$o-grid-default-config: map-deep-set($o-grid-default-config, "layouts" "M", 650px);

Dodatni resursi

Gore navedena funkcija nije jedino rješenje ovog problema.

Biblioteka Sassy-Maps također pruža map-deep-seti map-deep-getfunkcionira. U skladu s istim crtama, Hugo Giraudel također je napisao extendfunkciju u stilu jQuery kako bi ugrađena map-mergerekurzivna tehnologija mogla spojiti više od 2 karte odjednom.