// define the base colors
$colors: (
  'pink': #E2127A,
  'gray': #999,
  'links': 'pink',
  'site-background': 'gray',
);

// color function
@function color($color) {
  @if map-get($colors, $color) {
    $new-color: map-get($colors, $color);
    $color: color($new-color);
  }  
  @return $color;
}

// generate the color palette!
@for $i from 1 through length($colors) {
  $name: nth(map-keys($colors), $i);
  $color: color($name);
  
  div:nth-child(#{$i}) {
    background: $color;
    
    &::before {
      content: '#{$name}:';
    }
    
    &::after {
      content: '#{$color}';
    }
  }
}


// styles...
:root {
  font-size: 110%;
}

body {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

div {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  padding: 1.5em;
  justify-content: center;
  
  &::before {
    font-weight: bold;
    padding-right: 0.5em;
  }
}