css - Sass map loop possibilities -

i have pretty long sass map, fragment (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 trying write loop create series of classes named after color , shade bg color hex, so

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

however, syntax must broken since i'm not making leap 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 50 of each color, , wrong class name:

.bg-pbcyan-pbcyan {    background-color: #e5f5fc;  }  .bg-pbmediumblue-pbmediumblue {    background-color: #e5f1f8;  } 

what did screw up?

you're referencing wrong variable. $item variable (first) references mapping key name, not value (second). need iterate on value in inner loop.

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