Karmaşık Sass mimarileri üzerinde çalışırken, konfigürasyonu ve seçenekleri korumak için Sass haritalarının kullanılması alışılmadık bir durum değildir. Zaman zaman, haritalarda (muhtemelen birkaç seviyede), o-grid'den olduğu gibi haritalar göreceksiniz:
$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 );Bu tür haritalardaki sorun, iç içe geçmiş ağaçtan değerleri almanın ve ayarlamanın kolay olmamasıdır. Bu, her seferinde manuel olarak yapmak zorunda kalmamak için kesinlikle işlevler içinde saklamak isteyeceğiniz bir şeydir.
Derin olsun
Aslında, bir haritadan derinlemesine iç içe geçmiş değerleri almak için bir işlev oluşturmak çok kolaydır.
/// 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; )Örneğin, Mkonfigürasyon haritamızdan yerleşimle ilişkili değeri almak istiyorsak , bu şu kadar kolaydır:
$m-breakpoint: map-deep-get($o-grid-default-config, "layouts", "M"); // 610pxDizelerin etrafındaki tırnak işaretlerinin isteğe bağlı olduğunu unutmayın. Bunları yalnızca okunabilirlik endişeleri için ekliyoruz.
Derin set
Öte yandan, derinlemesine iç içe geçmiş bir anahtar ayarlamak için bir işlev oluşturmak çok yorucu olabilir.
/// 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; )Şimdi, Myerleşim planıyla ilişkili değeri konfigürasyon haritamızdan güncellemek istersek, şunları yapabiliriz:
$o-grid-default-config: map-deep-set($o-grid-default-config, "layouts" "M", 650px);Ekstra kaynaklar
Yukarıdaki işlev, bu soruna tek çözüm değildir.
Sassy-Maps kitaplığı da sağlar map-deep-setve map-deep-getişlevler. Aynı çizgide, Hugo Giraudel ayrıca extendyerleşik map-mergeözyinelemeli yapmak ve aynı anda 2'den fazla haritayı birleştirmek için jQuery tarzı bir işlev yazdı .