Colour generation

btn.scss

.btn {
  display: inline-block;
  padding: 0 50px;
  height: 40px;
  color: #FFF;
  font-size: 16px;
  line-height: 38px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #FFF;
}

@each $colour in $colours {
  $name: nth($colour, 1);
  $hex:  nth($colour, 2);

  .btn--#{$name} {
    border-color: $hex;
    color: $hex;

    &:hover {
      color: #FFF;
      background: $hex;
    }
  }
}

colours.scss

@each $colour in $colours {
  $name: nth($colour, 1);
  $hex:  nth($colour, 2);

  .u-bg-#{$name} {
    background: $hex;
  }

  .u-text-#{$name} {
    color: $hex;
  }

  .u-hover-#{$name}:hover {
    color: $hex;
  }
}

variables.scss

$colours: (
  'piglet'  #ED0082,
  'passion' #E60C29,
  'ohra'    #FF5519,
  'honey'   #FFBF02,
  'jeezz'   #96CC29,
  'pot'     #14C04D,
  'mare'    #16D6D9,
  'blu'     #009CF3,
  'navy'    #143FCC,
  'rain'    #6114CC,
  'white'   #FFFFFF,
  'grey'    #212121
);