डीप गेट / सेट इन मैप्स - सीएसएस-ट्रिक्स

जटिल सैस आर्किटेक्चर पर काम करते समय, कॉन्फ़िगरेशन और विकल्पों को बनाए रखने के लिए सैस के नक्शे का उपयोग करना असामान्य नहीं है। समय-समय पर, आपको नक्शे के भीतर नक्शे दिखाई देंगे (संभवतः कई स्तरों पर) जैसे ओ-ग्रिड से एक:

$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कार्य करता है। इसी तर्ज के साथ, ह्यूगो जिराउडेल ने एक extendअंतर्निहित कार्य करने के लिए एक jQuery-शैली फ़ंक्शन भी लिखा है map-mergeऔर एक ही बार में 2 से अधिक मानचित्रों को मर्ज करने में सक्षम है।