Changing configurations in Susy 3

grids.scss

// different maps for different configurations...
$susy: (
  columns: 4,
);

$medium: (
  columns: 8,
);

$large: (
  columns: 12,
);


// inline use
// (you can pass any config into the Susy functions)
.example {
  width: span(2);
  
  @media (min-width: 30em) {
    width: span(6, $medium);
  }
}


// block mixin
// change settings for a block of content
// (maybe we should add this to the Susy core?)
@mixin susy-settings-block($config) {
  // store the old settings
  $global: $susy;
  // apply the new settings
  $susy: map-merge($susy, $config) !global;
  
  // allow nested styles, using new settings
  @content;
  
  // return to the initial settings
  $susy: $global !global;
}


// block use
// (applies the new config to an entire section of code)
@media (min-width: 30em) {
  @include susy-settings-block($medium) {
    .example {
      width: span(6);
    }

    .example-2 {
      width: span(3);
    }
  }
}

Can we group all settings into one map then use the mixin?

$susy-settings(
susy: (
  columns: 4,
),
medium: (
  columns: 8,
),
large: (
  columns: 12,
)
);

Sure! I recognize this from SO - sorry I didn't see it here. Here's what I'd do:

@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;
}

This is my actual code:

@each $breakpoint, $width in $breakpoints{
	@include respond-to($breakpoint){
		@each $size, $setting in $susy-settings{
			@include susy-settings-block($setting) {
				....	
			}
		}
          }
}

But I get error

Error: argument `$map2` of `map-merge($map1, $map2)` must be a map

       Backtrace:
       	app/styles/utils/_grids.scss:27, in function `map-merge`
       	app/styles/utils/_grids.scss:27, in mixin `susy-settings-block`
       	app/styles/utils/_grids.scss:51, in mixin `@content`
       	app/styles/utils/_mixins.scss:30, in mixin `respond-to`
       	app/styles/utils/_grids.scss:49
        on line 27 of app/styles/utils/_grids.scss
>>   $susy: map-merge($susy, $new) !global;

Is there anything that I miss?

Thank you so much!

The way I wrote this new susy-setting-block it expects you to pass in the $size value, not the $setting value. If you want to pass in the $setting value, you should use my original mixin. Either will work fine, as far as the sass goes – though I'm confused about what you are trying to accomplish here.

So sorry @mirisuzanne. That's all my fault :(. You are right it can be done by the old mixins.
Thank you so much!