Semasa mengerjakan seni bina Sass yang kompleks, tidak jarang menggunakan peta Sass untuk mengekalkan konfigurasi dan pilihan. Dari semasa ke semasa, anda akan melihat peta dalam peta (mungkin di beberapa peringkat) seperti ini dari 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 );
Masalah dengan peta seperti itu adalah tidak mudah untuk mendapatkan dan menetapkan nilai dari pohon bersarang. Ini pasti sesuatu yang ingin anda sembunyikan dalam fungsi untuk mengelakkan daripada melakukannya secara manual setiap masa.
Dapatkan mendalam
Sebenarnya, membina fungsi untuk mendapatkan nilai bersarang dari peta sangat mudah.
/// 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; )
Sebagai contoh, jika kita ingin mendapatkan nilai yang berkaitan dengan M
tata letak dari peta konfigurasi kita, semudah:
$m-breakpoint: map-deep-get($o-grid-default-config, "layouts", "M"); // 610px
Perhatikan bahawa petikan di sekitar rentetan adalah pilihan. Kami hanya menambahkannya untuk masalah kebolehbacaan.
Set dalam
Sebaliknya, membina fungsi untuk menetapkan kunci yang bersarang sangat membosankan.
/// 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; )
Sekarang jika kita ingin mengemas kini nilai yang berkaitan dengan M
susun atur dari peta konfigurasi kita, kita dapat melakukan:
$o-grid-default-config: map-deep-set($o-grid-default-config, "layouts" "M", 650px);
Sumber tambahan
Fungsi di atas bukanlah satu-satunya penyelesaian untuk masalah ini.
Perpustakaan Sassy-Maps juga menyediakan map-deep-set
dan map-deep-get
berfungsi. Sejalan dengan itu, Hugo Giraudel juga telah menulis extend
fungsi gaya jQuery untuk menjadikan map-merge
bawaan rekursif dan dapat menggabungkan lebih dari 2 peta sekaligus.