Sass map loop possibilities

Question

I have a pretty long sass map, which as a fragment is (full code in Codepen):

$pbcolors: (

pbcyan : (
50:  #E5F5FC,
100: #CCEBF9,
200: #99D7F2,
300: #66C3EC,
400: #33AFE5,
500: #009DBF,
600: #008CAB,
700: #007C98,
800: #006D85,
900: #005D72
),
pbmediumblue: (
50:  #E5F1F8,
100: #CCE3F1,
200: #99C7E3,
300: #66AAD4,
400: #338EC6,
500: #0072B8,
600: #0065A5,
700: #005A93,
800: #004F80,
900: #00436E
),
pbpurple: (
50:  #F5ECF5,
100: #ECD9EB,
200: #D9B2D7,
300: #C68CC3,
400: #B365AF,
500: #A03F9B,
600: #90388B,
700: #80327C,
800: #702C6C,
900: #60255D
);

I am trying to write a loop to create a series of classes named after the color and the shade with the bg color as the hex, like so

.bg-pbmediumblue-100 { background: #CCE3F1; }

However, my syntax must be broken since I'm not making the leap to the second level:

@each $item, $color in $pbcolors {
  @each $shade, $value in $item {
    .bg-#{$shade}-#{$shade} {
      background-color: map-get(map-get($pbcolors, $item), 50);
    }
  }
}

From this I get ONLY the 50 of each color, and the wrong class name:

.bg-pbcyan-pbcyan {
   background-color: #E5F5FC;
 }

.bg-pbmediumblue-pbmediumblue {
   background-color: #E5F1F8;
 }

What did I screw up?

Answer 1

You're referencing the wrong variable. The $item variable (first) references the mapping key name, not the value (second). You need to iterate over the value in your inner loop.

@each $item, $color in $pbcolors {
  @each $shade, $value in $color {
    .bg-#{$item}-#{$shade} {
      background-color: $value;
    }
  }
}