<h1>3 Step Sass Smart Color Palette Generator</h1>
<section class="palette">
<!-- 3 - Add a bucket to the DOM for your color  -->
  <button class="color"></button>
  <button class="color"></button>
  <button class="color"></button>
  <button class="color"></button>
  <button class="color"></button>
  <button class="color"></button>
  <button class="color"></button>
</section>

/* 1 - Define the color variable */
$white: #FFFFFF;
$light-gray: #EFEFEF;
$yellow: #F2C500;
$orange: #F5A623;
$blue: #008CBA;
$green: #00BA76;
$purple: #8C70F2;
$joe-color: #22B7EB;

$trans: .3s ease;

@mixin palette($colors...) {
  $colorsLength: length($colors);
  @for $i from 1 through $colorsLength {
    .color:nth-child(#{$i}) {
      flex-basis: 0;
      flex-grow: 1;
      background-color: nth($colors, $i);
      height: 40px;
      margin-right: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
      text-align: center;
      color: transparent;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.05);
      border-radius: 2px;
      transition: background-color $trans, transform .3s cubic-bezier(.05,.58,.32,1.1);
      position: relative;
      &::before {
        content: '#{nth($colors, $i)}';
        position: absolute;
        top: 50%;
        transform: translate(-50%, 150%);
        transition: color $trans, transform .3s cubic-bezier(.05,.58,.32,1.1), box-shadow $trans;
      }
      &:hover {
        background-color: darken(nth($colors, $i), 7%);
        transform: translateY(-20%);
        box-shadow: 0 4px 4px rgba(0,0,0,.1);
        &::before {
          transform: translate(-50%, -50%);
          color: $white;
        }
      }
    }
  }
}
/* 2 - Add the color variable to the mixin in the order you want it */
@include palette($light-gray, $yellow, $orange, $joe-color, $blue, $green, $purple);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html {
  padding: 20px 80px;
  background-color: $joe-color;
  font-family: Open Sans, sans-serif;
  transition: background-color 0.3s ease;
}
section {
  padding: 30px 30px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  background-color: $white;
}
h1 {
  text-align: center;
  color: white;
}

$('.color').on('click', function(){
  // This actually gets the current darkened color, but this part is just for my own amusement :p
  var newColor = $(this).css('background-color');
  $('html').css('background-color', newColor);
});