Cacher is the code snippet organizer for pro developers

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

.box {
  font-weight: bold;
  font-size: 2em;
  padding: 1em;
  display: inline-block;
  color: darken #0074d9, 10%;
  background: lighten #ffdc00, 10%;
}

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

$colors: (
  red: #FF4136,
  blue: #0074d9,
  yellow: #ffdc00,
  orange: #ff851b
);
$variants: (
  dark: (darken, 10%),
  light: (lighten, 10%),
  fade: (rgba, .7)
);
@function c($color, $variant: false) {
  @if not map-has-key($colors, $color) {
		@warn "Invalid color name: `#{$color}`.";
	} @else {
	  $return_color: map-get($colors, $color);
	  @if $variant {
	    $return_color: nth(map-get($variants, $variant), 1)($return_color,nth(map-get($variants, $variant), 2));
	  }
	  @return $return_color;
	}
}
.box {
  font-weight: bold;
  font-size: 2em;
  padding: 1em;
  display: inline-block;
  color: c(blue,dark);
  background: c(yellow,light);
}

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