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
#71 (comment),
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
#71 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABe4lLeeCf2FXLy2F96hJdJh1l4hmCrWks5qludlgaJpZM4JytGL
.

Marco M. Jaeger
http://net4visions.com

[KittyGiraudel]

Anytime. :)