Sass Map - Key Value Pairs

Key : Value - Map()

by Ben Graham

HTML

<div class="container">
  <div class="Australia"></div>
  <div class="England"></div>
  <div class="NewZealand"></div>
  <div class="Brazil"></div>
</div>

SCSS

$tile: 200px;
.tile {
  width: $tile;
  height: $tile;
}

.container {
  -webkit-display: flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

$team-colors:( Australia: #1e90ff, England: #ff3333, NewZealand: #181818, Brazil: #32cd32, );
@each $team,
$color in $team-colors {
  .#{$team} {
    @extend .tile;
    background-color: $color;
  }
}

@debug Australian Color map-has-key($team-colors, Australia);
@debug Colors map-values($team-colors);
@debug All Countries map-keys($team-colors);