Looping SCSS Map Colours

looping-map-colours.scss

// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----

$colours: (
  'green': #00da80,
  'pink': #fad1e3,
  'yellow': #fbee46,
  'red': #ed1c24,
  'blue': #5162ee
);

.classy {
  width: 100%;

  @each $name, $colour in $colours {
    &--#{$name} {
      color: $colour;
    }
  }
}

.single {
  color: map-get($colours, 'red');
}

output.css

.classy {
  width: 100%;
}
.classy--green {
  color: #00da80;
}
.classy--pink {
  color: #fad1e3;
}
.classy--yellow {
  color: #fbee46;
}
.classy--red {
  color: #ed1c24;
}
.classy--blue {
  color: #5162ee;
}

.single {
  color: #ed1c24;
}