Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Is there a way to get the next item in a map by using the name of the item before it?

This is going in a bit deep.. I have played around with list and adding indexes in SCSS... but I need to access them, really, with the 'map-get()' function. Is there a way of doing this? I have got this code so far, to give you an idea of what I am trying to achieve:

The lists: 

$units__map : (
    1px,
    768px,
    960px,
    1080px
);

$sizes__map : (
    small,
    medium,
    large,
    largest
);

The mixin:

@mixin media($breakpoint) {
    $breakpoint : index($sizes__map, $breakpoint);
    @if $breakpoint {
        @if $breakpoint < length($sizes__map) {
            @media screen and (min-width : nth($units__map, $breakpoint ) ) and (max-width: nth($units__map, ($breakpoint) + 1 ) - 1) {
                body {
                    height: $breakpoint;
                }
                @content;
            }
        }
        @elseif $breakpoint == length($sizes__map) {
            @media screen and (min-width : nth($units__map, $breakpoint ) ) {
                body {
                    height: $breakpoint;
                }
                @content;
            }
        }
    }
    @else {
        @error "Sorry but #{$breakpoint} is not a breakpoint in your setup";
    }
}

Called like this:

@include media(small) {
}

@include media(medium) {
}

@include media(large) {
}

@include media(largest) {
}

which currently ouputs this (body is there simpy for output):

@media screen and (min-width: 1px) and (max-width: 767px) {
  body {
    height: 1; } }

@media screen and (min-width: 768px) and (max-width: 959px) {
  body {
    height: 2; } }

@media screen and (min-width: 960px) and (max-width: 1079px) {
  body {
    height: 3; } }

@media screen and (min-width: 1080px) {
  body {
    height: 4; } }

What I am trying to achieve is exactly the above but simply using a key/value pair via the map function:

$units__map : (
    small : 1px,
    medium : 768px,
    large : 960px,
    largest : 1080px
);

So, If I pass that argument of 'small' in to the media mixin, I need to be able to locate the 'medium' key next to it, using a map... Any ideas?

Hampton Catlin, Guil Hernandez ...help?

Liam Maclachlan
Liam Maclachlan
22,805 Points

I think I have found a solution. I will post it up once I have worked out the bugs. HINT: it's using the map-keys function, mixed with the nth function.. let's hope it works.

1 Answer

Liam Maclachlan
Liam Maclachlan
22,805 Points

Oooooooh, my god. I've sorted it. Well that was fun! Code is below. I haven't dried it out yet, but you get the idea :) (Codepen here)

@function nextKey($current-value, $mapped-list:$sizes__map) {
    // get current key from list
    $the-list: map-keys($mapped-list);

    //find index of current value and add 1
    $the-index: ( index( $the-list, $current-value) ) + 1;

    // get value from list with new index
    $new-value : nth($the-list, $the-index);

    @return $new-value;

}

@mixin media($breakpoint) {
    // return all keys from a map as a list
    $mapped__keys : map-keys($sizes__map);

    // get index of the current name passed
    $index : index($mapped__keys, $breakpoint);

    @if $index {
        // if there is another key above the selected key, run this
        @if $index < length($sizes__map) {
            @media screen and (min-width : map-get($sizes__map, $breakpoint ) ) and (max-width: map-get($sizes__map, nextKey($breakpoint) )  - 1 ) {
                body {
                    height: $index;
                }
                @content;
            }
        }
        // if key is the largest value, run this
        @elseif $index == length($sizes__map) {
            @media screen and (min-width : map-get($sizes__map, $breakpoint) ) {
                body {
                    width: $index;
                }
                @content;
            }
        }
    }
    @else {
        @error "Sorry but #{$breakpoint} is not a breakpoint in your setup";
    }
}

Uses this map, only: 

$sizes__map : (
    small: 1px,
    medium: 768px,
    large: 960px,
    largest: 1080px 
);

called like this:

@include media(small) {
}
@include media(medium) {
}
@include media(large) {
}
@include media(largest) {
}

and outputs this!

@media screen and (min-width: 1px) and (max-width: 767px) {
  body {
    height: 1; } }
@media screen and (min-width: 768px) and (max-width: 959px) {
  body {
    height: 2; } }
@media screen and (min-width: 960px) and (max-width: 1079px) {
  body {
    height: 3; } }
@media screen and (min-width: 1080px) {
  body {
    width: 4; } }