0

How can I isolate nested sass map into a new map? For example I have sass map like this:

$susy-setting: (
  s: (
    'columns': 4,
    'gutters': 30px,
  ),

  m: (
    'columns': 8,
    'gutters': 30px,
  ),

  l: (
    'columns': 12,
    'gutters': 30px,
  )
);

Then I need to isolate each map inside after the loop, because my other mixin need map for its parameter.

@each $setting in $susy-setting{
    @include susy-settings-block($setting) { // This mixin need map
        @for $i from 1 through map-get($setting, 'columns') {
            @content;
        }
    }
}
Nizamil Putra
  • 582
  • 1
  • 7
  • 26

1 Answers1

0

To answer your primary question, you'll need to get both the key and value in your loop: @each $size, $setting in $susy-setting. The $size variable will store the key (e.g. s, m, l) while the $setting variable stores the map value assigned to that key.

EDIT: I saw your comment on my gist, which provides a bit more context. Try this:

@mixin susy-settings-block(
  $name, 
  $config: $susy-settings
) {
  // store the old settings
  $global: $susy;

  // Get the new settings by name
  $new: map-get($config, $name);

  // apply the new settings
  $susy: map-merge($susy, $new) !global;

  // allow nested styles, using new settings
  @content;

  // return to the initial settings
  $susy: $global !global;
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43