Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

// Color vars
$purple:                #ae27a7;
$slate:                 #26245d;
$blue:                  #2d92fe;

$lime:                  #b7d83d;
$turquoise:             #14cbb6;
$orange:                #ffa000;
$tomato:                #ff7d7d;
$violet:                #655bbc;

$gray-dark:             #222222;
$gray:                  #e4e4e4;
$gray-light:            #f5f5f5;

// Colors by function
// Primary colors
$primary-black:         $gray-dark;
$primary-white:         #ffffff;
$primary-base:          $slate;
$primary-accent:        $purple;

$primary-blue:          $blue; //@todo  retire

// Secondary colors
$secondary-light:       $gray-light;
$secondary-medium:      $gray;
$secondary-dark:        $blue;

$secondary-lightgray:   $secondary-light;   // @todo retire
$secondary-gray:        $secondary-medium;  // @todo retire
$secondary-darkgray:    $secondary-dark;    // @todo retire

// Tertiary colors
$tertiary-blue:         #03687e;            // @todo retire
$tertiary-lightgray:    #adb1b3;            // @todo retire

// Show Palettes
// Wish this was a map, but we're not able to use a higher version of SASS
$show-palette-names-stack: 'lime', 'turquoise', 'orange', 'tomato', 'purple';
$show-palette-stack:       $lime,  $turquoise,  $orange,  $tomato,  $purple;


/*
  Palette Mixin
  -------------

  Applies palette to a given property

    <pre>
    @param $property              string     [optional]
        What property should palette color be applied to
    @param $this-element          boolean    [optional]
        Is palette class on this element? If not we assume it's a child element
    @param $palette-class-prefix  string     [optional]
        Allows addition of a prefix on palette class in cases where we can't
        get palette class where we'd like it.
        By default main content's show's palette class is added to div.page
        as `.page-palette-class`
    </pre>

 */
@mixin apply-palette($property: background-color, $this-element: false, $palette-class-prefix: '') {
  #{$property}: $purple; // Default if there isn't a palette defined

  // Add a dash to the end of the palette-class-prefix if it exists
  @if $palette-class-prefix != '' {
    $palette-class-prefix: $palette-class-prefix + '-';
  }


  // Iterates through the palettes and sets a style per palette with the given property
  $i: 1;
  @each $color in $show-palette-names-stack {
    $palette-selector: '.' + $palette-class-prefix + 'palette-' + $color;
    @if $this-element {
      &#{$palette-selector} {
        #{$property}: nth($show-palette-stack, $i);
      }
    }
    @else {
      #{$palette-selector} & {
        #{$property}: nth($show-palette-stack, $i);
      }
    }
    $i: $i + 1;
  }
}


  .promo__info-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 35%;
    background: $orange;
    @include apply-palette(color);
  }
  
  .wakka {
    @include apply-palette(background-color, true);
  }

SassMeister-output.css

/*
  Palette Mixin
  -------------

  Applies palette to a given property

    <pre>
    @param $property              string     [optional]
        What property should palette color be applied to
    @param $this-element          boolean    [optional]
        Is palette class on this element? If not we assume it's a child element
    @param $palette-class-prefix  string     [optional]
        Allows addition of a prefix on palette class in cases where we can't
        get palette class where we'd like it.
        By default main content's show's palette class is added to div.page
        as `.page-palette-class`
    </pre>

 */
.promo__info-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 35%;
  background: #ffa000;
  color: #ae27a7;
}
.palette-lime .promo__info-wrapper {
  color: #b7d83d;
}
.palette-turquoise .promo__info-wrapper {
  color: #14cbb6;
}
.palette-orange .promo__info-wrapper {
  color: #ffa000;
}
.palette-tomato .promo__info-wrapper {
  color: #ff7d7d;
}
.palette-purple .promo__info-wrapper {
  color: #ae27a7;
}

.wakka {
  background-color: #ae27a7;
}
.wakka.palette-lime {
  background-color: #b7d83d;
}
.wakka.palette-turquoise {
  background-color: #14cbb6;
}
.wakka.palette-orange {
  background-color: #ffa000;
}
.wakka.palette-tomato {
  background-color: #ff7d7d;
}
.wakka.palette-purple {
  background-color: #ae27a7;
}