epicmonkeez · May 26, 2014 07:46
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
 <html>
  <head>
    <title>DRY CSS through cached/temp placeholders</title>
  </head>
  <body>
    <article>
      <h1 class="txt-lead">This title should be black</h1>
      <div class="error">Oops, this is an error!<br>With a red background.</div>
      <div>
        <button>Some ugly button</button>
      </div>
      <h3>I am a blue title</h3>
      <p class="txt-info">I am blue...</p>
    </article>
  </body>
 </html>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // 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;
  }
 }



diff --git a/SassMeister-output.css b/SassMeister-output.css
 .txt-info, h3, button:hover {
  color: #0074d9;
 }

 .error, button {
  background-color: #ff4136;
 }

 article {
  color: #b10dc9;
 }

 .error, button {
  color: white;
 }

 .txt-lead {
  color: #111111;
 }

 .txt-lead, button:hover {
  background-color: #dddddd;
 }

 body {
  font-size: 1em;
  line-height: 1.44em;
  font-family: "FreeSans", Helvetica, sans-serif;
 }

 article {
  width: 60%;
  margin: 0 auto;
 }

 .error {
  padding: .5em;
 }

 .txt-lead {
  font-size: 2em;
  padding: .5em;
 }

 button {
  text-decoration: none;
  cursor: pointer;
  padding: .5em;
  border: none;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 <html>
  <head>
    <title>DRY CSS through cached/temp placeholders</title>
  </head>
  <body>
    <article>
      <h1 class="txt-lead">This title should be black</h1>
      <div class="error">Oops, this is an error!<br>With a red background.</div>
      <div>
        <button>Some ugly button</button>
      </div>
      <h3>I am a blue title</h3>
      <p class="txt-info">I am blue...</p>
    </article>
  </body>
 </html>
	<html>
	<head>
	<title>DRY CSS through cached/temp placeholders</title>
	</head>
	<body>
	<article>
	<h1 class="txt-lead">This title should be black</h1>
	<div class="error">Oops, this is an error!<br>With a red background.</div>
	<div>
	<button>Some ugly button</button>
	</div>
	<h3>I am a blue title</h3>
	<p class="txt-info">I am blue...</p>
	</article>
	</body>
	</html>
	// ----
	// 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;
	}
	}
	.txt-info, h3, button:hover {
	color: #0074d9;
	}

	.error, button {
	background-color: #ff4136;
	}

	article {
	color: #b10dc9;
	}

	.error, button {
	color: white;
	}

	.txt-lead {
	color: #111111;
	}

	.txt-lead, button:hover {
	background-color: #dddddd;
	}

	body {
	font-size: 1em;
	line-height: 1.44em;
	font-family: "FreeSans", Helvetica, sans-serif;
	}

	article {
	width: 60%;
	margin: 0 auto;
	}

	.error {
	padding: .5em;
	}

	.txt-lead {
	font-size: 2em;
	padding: .5em;
	}

	button {
	text-decoration: none;
	cursor: pointer;
	padding: .5em;
	border: none;
	}