// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// DRY CSS example through cached/temp placeholders
// By @EpicMonkeez
// epicmonkeez.com
// ----------------------------------------

// Colors are based on better colors for the web 
// http://github.com/mrmrs/colors

// Cool //
$color-aqua        : #7FDBFF;
$color-blue        : #0074D9;
$color-navy        : #001F3F;
$color-teal        : #39CCCC;
$color-green       : #2ECC40;
$color-olive       : #3D9970;
$color-lime        : #01FF70;

// Warm //
$color-yellow      : #FFDC00;
$color-orange      : #FF851B;
$color-red         : #FF4136;
$color-fuchsia     : #F012BE;
$color-purple      : #B10DC9;
$color-purple-dark : #4d4655;
$color-maroon      : #85144B;

// grey Scale //
$color-white       : #fff;
$color-silver      : #ddd;
$color-grey        : #aaa;
$color-black       : #111;

// Comment out the colors you don't need

$colors         : (
	navy 					$color-navy,
	blue					$color-blue,
	aqua					$color-aqua,
	teal 					$color-teal,
	olive 				$color-olive,
	green 				$color-green,
//	lime 					$color-lime,
	yellow 				$color-yellow,
	orange 				$color-orange,
	red 					$color-red,
	fuchsia 			$color-fuchsia,
	purple 				$color-purple,
	maroon 				$color-maroon,
	white 				$color-white,
	grey 					$color-grey,
	black 				$color-black,
	silver 				$color-silver
) !default;

// Create cached placeholders based on the $colors vars
// eq %bgcolor-teal { background-color: #39CCCC; }
// eq %color-silver { color: #ddd; }
// usage @extend %color-silver;

@each $value in $colors {
  
  %bgcolor-#{nth($value, 1)} {
    background-color: nth($value, 2);
  }
  
  %color-#{nth($value, 1)} {
    color: nth($value, 2);
  }
  
  // If you want to role out all your color classes
  // uncomment the following six lines (74 - 79).
  // See what happens ;)
  
  //.bgcolor-#{nth($value, 1)} {
  //   background-color: nth($value, 2);
  //}
  //.color-#{nth($value, 1)} {
  //   color: nth($value, 2);
  //}

}

// Some random classes

body {
  font-size: 1em;
  line-height: 1.44em;
  font-family: "FreeSans", Helvetica, sans-serif;
}
article {
  width: 60%;
  margin: 0 auto;
  @extend %color-purple;
}

.error {
  padding:.5em;
  @extend %color-white;
  @extend %bgcolor-red;
}

.txt-lead {
  font-size: 2em;
  padding: .5em;
  @extend %bgcolor-silver;
  @extend %color-black;
}

.txt-info {
  @extend %color-blue;
}

h3 {
  @extend %color-blue;
}

button {
  text-decoration: none;
  cursor: pointer;
  padding: .5em;
  border: none;
  @extend %color-white;
  @extend %bgcolor-red;
  &:hover {
    @extend %bgcolor-silver;
    @extend %color-blue;
  }
}