Cacher is the code snippet organizer for pro developers

<div class="box">I'm in a box.</div>

.box {
  font-weight: bold;
  font-size: 2em;
  padding: 1em;
  display: inline-block;
  border: 2px solid #8d8d8d;
  background: #e76b00;
  color: #ff9d48;
}

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// Store the main colors for the site:
// Key = shorthand to be called in function; value = valid color $value
$colors: (
  red: #ff4136,
  blue: #0074d9,
  yellow: #ffdc00,
  orange: #ff851b
);

// Store the different functions which could alter colors:
// 1 Key is shorthand to be used in partials, value is map. 
// 2-A First item in map (key: function) is the function name, 
// 2-B Optional second map (key: parameters) is a list of additional values.
// With these limitations, this function does not support 
// adjust-color, scale-color & change-color.
$variations: (
  light: (
    function: lighten,
    parameters: 15%
  ),
  dark: (
    function: darken,
    parameters: 10%
  ),
  fade: (
    function: rgba,
    parameters: .7
  ),
  gray: (
    function: grayscale
  ),
  shade: (
    function: mix,
    parameters: white 80%
  )
);

@function color-variation($color, $variation: false) {

  // Correctly set $color variable:
  @if map-has-key($colors, $color) {
    // $color is in $colors, set variable = map-value
    $color: map-get($colors, $color); 
  } @else {
    @if type-of($color) != color {
      // $color is not in $color and $color is not a color
      @error "Invalid color name: `#{$color}`."; 
    }
    // $color is a valid color - use it
  }

  @if $variation {
    @if not map-has-key($variations, $variation) {
      // variation is not in $variations
      @error "Invalid $variation: `#{$variation}`.";
    } @else {
      // make it easier to deal with nested map
      $this-variation: map-get($variations, $variation);
      // $args = $function, $color
      $args: join(map-get($this-variation, function), $color);
      @if map-get($this-variation, parameters) {
        // $args = $function, $colors, $parameters
        $args: join($args, map-get($this-variation, parameters));
      }
      //@return $args;
      @return call($args...);
    }
  }
  // no $variation, just return $color
  @return $color;
}

// Alias function to make typing easier:
@function cv($color, $variation:false) {
  @return color-variation($color, $variation);
}

.box {
  font-weight: bold;
  font-size: 2em;
  padding: 1em;
  display: inline-block;
  
  // Let's do this!
  border: 2px solid cv(orange, gray);
  background: cv(orange, dark);
  color: cv(orange, shade);
}

<div class="box">I'm in a box.</div>