Sass map-get functions

Enhancement functions map-get-next and map-get-prev. For example when Sass map is used with a @each loop.

Thanks to @rowild now available as npm package.

Table of Contents

• Installation with npm
• map-get-next
  • Basic usage
    • CSS output
  • Practical usage
    • CSS output
  • Parameters
• map-get-prev
  • Basic usage
    • CSS output
  • Parameters

Installation with npm

npm install sass-map-get-next-prev -D

map-get-next

Function to get next map item. Returns next map item or fallback value if map, key or next item does not exist.

Basic usage

$map: (
    s: 320px,
    m: 768px,
);

.foo {
  width: map-get-next($map, s);
}

.bar {
  width: map-get-next($map, m, 1024px);
}

CSS output

.foo {
  width: 768px;
}

.bar {
  width: 1024px;
}

Practical usage

Set min- and max with for all breakpoints in Sass map.

$map: (
    s: 320px,
    m: 768px,
);

@each $breakpoint, $width in $map {
  @media (min-width: $width) and (max-width: map-get-next($map, $breakpoint, 1024px) - 1px) {
    ...
  }
}

CSS output

@media (min-width: 320px) and (max-width: 767px) {
  ...
}

@media (min-width: 768px) and (max-width: 1023px) {
  ...
}

Parameters

• $map - Sass list map
• $key - List map key
• $fallback (false) - Fallback value if map, key or next item does not exist
• $debug (false) - Debug option

map-get-prev

Equivalent to map-get-next

Function to get previous map item. Returns previous map item or fallback value if map, key or previous item does not exist.

Basic usage

$map: (
    s: 320px,
    m: 768px,
);

.foo {
    width: map-get-prev($map, m);
}

.bar {
    width: map-get-prev($map, s, 240px);
}

CSS output

.foo {
    width: 320px;
}

.bar {
    width: 240px;
}

Parameters

• $map - Sass list map
• $key - List map key
• $fallback (false) - Fallback value if map, key or previous item does not exist