Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Changing configurations in Susy 3
// 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);
}
}
}
@rizqinizamil

This comment has been minimized.

Copy link

commented Jun 7, 2017

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

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

This comment has been minimized.

Copy link
Owner Author

commented Jun 8, 2017

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

This comment has been minimized.

Copy link

commented Jun 9, 2017

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!

@mirisuzanne

This comment has been minimized.

Copy link
Owner Author

commented Jun 15, 2017

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.

@rizqinizamil

This comment has been minimized.

Copy link

commented Jun 16, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.