एससीएसएस में, मैं उन इंडेक्स को प्राप्त करने की कोशिश कर रहा हूं जिन्होंने एक और $map घोंसला बनाया है।

मेरे पास एक नक्शा है जो दिखता है:

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ), // array.
    font-size: (
        20px, 30px, 40px, 50px
    )
);

और इस तरह मैंने इंडेक्स को @ फ़ंक्शन में प्राप्त करने का प्रयास किया

@function test($map, $keys...) {

    @each $val in $keys {

        @for $val from 0 to length($map) {
            #{$keys}: $val;
        }
    }
    @return $map;
};

जब मैं इस तरह @for विधि जोड़ता हूं तो फ़ंक्शन काम नहीं करता है। मैं इस मुद्दे के बारे में Google पर खोज कर रहा हूं लेकिन मुझे कोई समाधान नहीं मिला।

क्या किसी को पता है कि एससीएसएस में $map (नेस्टेड) ​​​​के अंदर सरणी की अनुक्रमणिका कैसे प्राप्त करें?

0
l3lue 30 नवम्बर 2018, 14:27

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप अपने मानचित्र में अपनी सूचियों के प्रत्येक आइटम पर लूप चाहते हैं, तो आप ऐसा कुछ कर सकते हैं:

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ), 
    font-size: (
        20px, 30px, 40px, 50px
    )
);

@mixin media-module($map, $key){
  $myList:map-get($map, $key);

  @each $myItem in $myList {
    $i: index($myList, $myItem);
    .someElement-#{$i} { 
        #{$key}: $myItem;
    }
  }
}

और फिर उस मिश्रण को शामिल करें:

div{
  @include media-module($bp-values, width)
}

div{
  @include media-module($bp-values, font-size)
}

आपका आउटपुट होगा:

div .someElement-1 {
  width: 200px;
}
div .someElement-2 {
  width: 300px;
}
div .someElement-3 {
  width: 400px;
}
div .someElement-4 {
  width: 500px;
}

div .someElement-1 {
  font-size: 20px;
}
div .someElement-2 {
  font-size: 30px;
}
div .someElement-3 {
  font-size: 40px;
}
div .someElement-4 {
  font-size: 50px;
}
1
halfer 3 मार्च 2019, 12:01