How to create a Sass map grouped by key

[mmjaeger]

Hello Hope you got a minute: How do I get from:

@include grid-column($width: (xs: 2, md: 4, lg: 4), $offset: (md: 6, lg: 3));

…to a sass map like:

$map: (
    xs: (
        width: 2
    ),
    md: (
        width: 4,
        offset: 6
    ),
    lg: (
        width: 4,
        offset: 3
    )
);

Thank you in advance for your input

[KittyGiraudel]

Hi, I’m not sure I get you. The first one is a mixin call outputting some CSS, the second one is a data structure. What do you want to achieve?

[mmjaeger]

Wow, that was quick - thank you for replying.

I'd like to process that mixin call in the mixin or a function so I could group them by breakpoint name. if I process it the way it is now, I would get a media query for 'width' and a media query for 'offset' - if I'd be able to put that mixin call into a map grouped by media query I could have one media query for 'width' and 'offset'. hope that clarifies things a little.

On Thu, Sep 1, 2016 at 6:45 AM, Hugo Giraudel notifications@github.com wrote:

Hi, I’m not sure I get you. The first one is a mixin call outputting some CSS, the second one is a data structure. What do you want to achieve?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HugoGiraudel/ama/issues/71#issuecomment-244083064, or mute the thread https://github.com/notifications/unsubscribe-auth/ABe4lLT68fWS-Q20WG0POkfaqDGHVp_Gks5qltbugaJpZM4JytGL .

Marco M. Jaeger http://net4visions.com

[KittyGiraudel]

There you go:

@function get-breakpoints($width, $offset) {
  $map: ();

  @each $breakpoint, $value in $width {
    $existing-breakpoint: map-get($map, $breakpoint) or ();
    $new-breakpoint: map-merge($existing-breakpoint, (width: $value));
    $map: map-merge($map, ($breakpoint: $new-breakpoint));
  }

  @each $breakpoint, $value in $offset {
    $existing-breakpoint: map-get($map, $breakpoint) or ();
    $new-breakpoint: map-merge($existing-breakpoint, (offset: $value));
    $map: map-merge($map, ($breakpoint: $new-breakpoint));
  }

  @return $map;
}

:)

[mmjaeger]

Thank you so much - really appreciate it.

On Thu, Sep 1, 2016 at 7:55 AM, Hugo Giraudel notifications@github.com wrote:

There you go:

@function get-breakpoints($width, $offset) { $map: ();

@each $breakpoint, $value in $width { $existing-breakpoint: map-get($map, $breakpoint) or (); $new-breakpoint: map-merge($existing-breakpoint, (width: $value)); $map: map-merge($map, ($breakpoint: $new-breakpoint)); }

@each $breakpoint, $value in $offset { $existing-breakpoint: map-get($map, $breakpoint) or (); $new-breakpoint: map-merge($existing-breakpoint, (offset: $value)); $map: map-merge($map, ($breakpoint: $new-breakpoint)); }

@return $map; }

:)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/HugoGiraudel/ama/issues/71#issuecomment-244105145, or mute the thread https://github.com/notifications/unsubscribe-auth/ABe4lLeeCf2FXLy2F96hJdJh1l4hmCrWks5qludlgaJpZM4JytGL .

Marco M. Jaeger http://net4visions.com

[KittyGiraudel]

Anytime. :)