color map + generated Colors

_color-map.scss

$site-colors: (
 primary-color: #f60,
 secondary-color: #ff0000,
 tertiary-color: #008000,
);

@each $color, $value in $site-colors  {
 .styleguide .#{$color} {
   background-color: $value;
   color: white;
   display: inline-block;
   height: 150px;
   position: relative;
   width: 150px;

   &:after {
     content: '#{$color}: #{$value}';
     display: inline-block;
     position: absolute;
   }
 }
}

.color_primary {
    color: map-get($site-colors, 'primary-color');
}