Iterate through a SASS map and out put different results based on the variable type

network-colors.scss

// Social Network Colours
$network-colors: (
  twitter: #00ACED,
  youtube: #CD201F,
  pinterest: #CB2027,
  github: #333333,
  dribbble: #EA4C88,
  instagram: #517FA4
);

// Social Network Backgrounds
$network-backgrounds: (
  twitter: "https://pbs.twimg.com/profile_banners/783214/1347405327/1500x500",
  youtube: "https://pbs.twimg.com/profile_banners/10228272/1410614774/1500x500",
  
  // Use the colours as fallbacks until we have banners
  pinterest: map-get($network-colors, pintrest),
  github: map-get($network-colors, github),
  dribbble: map-get($network-colors, dribbble),
  instagram: map-get($network-colors, instagram)
);

// Iterate through the backgrounds
@mixin network-backgrounds() {

  @each $name, $background in $network-backgrounds {
    .bg-#{$name} {

      @if type-of($background) == "string" {
        background-image: url($background);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }

      @elseif type-of($background) == "color" {
        background-color: $background;
      }

    }
  }

}

// Call the mixin
@include network-backgrounds;