Generated by SassMeister.com.

SassMeister-input-HTML.html

<h3>Current Colors</h3>
<div class="current-one">one</div>
<div class="current-two">two</div>
<div class="current-three">three</div>
<div class="current-four">four</div>
<div class=current-five>five</div>
<div class="current-six">six</div>
<div class="current-seven">seven</div>
<div class="current-eight">eight</div>
<div class="current-nine">nine</div>
<div class="current-ten">ten</div>
<div class="current-eleven">eleven</div>
<div class="current-hardcode-one">hardcoded</div>
<div class="current-hardcode-two">hardcoded</div>
<div class="current-hardcode-three">hardcoded</div>
<div class="current-hardcode-four">hardcoded</div>
<hr>
<h3>Refactored Colors</h3>
<div class="refactor-one">one</div>
<div class="refactor-two">two</div>
<div class="refactor-three">three</div>
<div class="refactor-four">four</div>
<div class="refactor-five">five</div>
<div class="refactor-six">six</div>
<div class="refactor-seven">seven</div>
<div class="refactor-eight">eight</div>
<div class="refactor-nine">nine</div>
<div class="refactor-ten">ten</div>
<div class="refactor-eleven">eleven</div>
<div class="refactor-hardcode-one">hardcoded</div>
<div class="refactor-hardcode-two">now named</div>
<div class="refactor-hardcode-three">now named</div>
<div class="refactor-hardcode-four">now named</div>
<hr>

SassMeister-input.scss

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

// Current Colors
$dark-primary: #333;
$medium-gray: #969696;
$dark-gray: #4d4d4d;
$dark-secondary: #ccc;
$dark-theme-media: #111;
$ondark-type: #969696;
$blue-very-dark: #021929;
$blue-dark: #113850;
$blue-neutral: #516272;
$blue-light: #5172A0;
$yellow-primary: #e4cb00;
$red-breaking: #940006;
$gray-light: #eee;
$gray-light2: #e4e8ea;
$red: #940006;
$green: #238837;
$green-native-ad: #317c2e;
$link-normal: lighten($dark-primary, 10%);
$link-hover: lighten($dark-primary, 10%);
$link-active: lighten($dark-primary, 10%);
$link-focus: lighten($dark-primary, 10%);
$front-bg: #333;

// ----------------------
// Refactored Colors
// ----------------------

// Descriptive Vars
$grey: #777;
$dark-grey: #333;
$darker-grey: #111;
$light-grey: #eee;
$blue: #113850;
$dark-blue: #081b26;
$light-blue: #5172a0;
$lighter-blue: #9eb6d7;
$lightest-blue: #e2e6e9;
$red: #940006;
$yellow: #e4cb00;
$orange: #fcb837;
$green: #317c2e;

// Functional Vars
$sitewide-header-color: $blue;
$sitewide-header-border-color: $light-blue;
$sitewide-header-link-color: $light-blue;
$sitewide-header-link-hover-color: #fff;
$breaking-red: $red;
$body-text-color: $grey;
$native-ad-green: $green;
$link-normal: lighten($grey, 10%);
$link-hover: lighten($grey, 10%);
$link-active: lighten($grey, 10%);
$link-focus: lighten($grey, 10%);

hr {
  clear: both;
}

div {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
  background-color: red;
  color: #fff;
}

// ----------------------
// Current Colors
// ----------------------

.current-one { background-color: $blue-dark; }
.current-two { background-color: $blue-light; }
.current-three { background-color: $red-breaking; }
.current-four { background-color: $gray-light; }
.current-five { background-color: $yellow-primary; }
.current-six { background-color: $green; }
.current-seven { background-color: $blue-very-dark; }
.current-eight { background-color: $dark-theme-media; }
.current-nine { background-color: $gray-light2; }
.current-ten { background-color: $green-native-ad; }
.current-eleven { background-color: $front-bg; }
.current-hardcode-one { background-color: #333; }
.current-hardcode-two { background-color: #fcb837; }
.current-hardcode-three { background-color: #91b1ca; }
.current-hardcode-four { background-color: #777; }

// ----------------------
// Refactored Colors
// ----------------------

.refactor-one { background-color: $blue; }
.refactor-two { background-color: $light-blue; }
.refactor-three { background-color: $red; }
.refactor-four { background-color: $light-grey; }
.refactor-five { background-color: $yellow; }
.refactor-six { background-color: $green; }
.refactor-seven { background-color: $dark-blue; }
.refactor-eight { background-color: $darker-grey; }
.refactor-nine { background-color: $lightest-blue; }
.refactor-ten { background-color: #fff; }
.refactor-eleven { background-color: $dark-grey; }
.refactor-hardcode-one { background-color: #fff; }
.refactor-hardcode-two { background-color: $orange; }
.refactor-hardcode-three { background-color: $lighter-blue; }
.refactor-hardcode-four { background-color: $grey; }

SassMeister-output.css

hr {
  clear: both;
}

div {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
  background-color: red;
  color: #fff;
}

.current-one {
  background-color: #113850;
}

.current-two {
  background-color: #5172a0;
}

.current-three {
  background-color: #940006;
}

.current-four {
  background-color: #eeeeee;
}

.current-five {
  background-color: #e4cb00;
}

.current-six {
  background-color: #317c2e;
}

.current-seven {
  background-color: #021929;
}

.current-eight {
  background-color: #111111;
}

.current-nine {
  background-color: #e4e8ea;
}

.current-ten {
  background-color: #317c2e;
}

.current-eleven {
  background-color: #333333;
}

.current-hardcode-one {
  background-color: #333;
}

.current-hardcode-two {
  background-color: #fcb837;
}

.current-hardcode-three {
  background-color: #91b1ca;
}

.current-hardcode-four {
  background-color: #777;
}

.refactor-one {
  background-color: #113850;
}

.refactor-two {
  background-color: #5172a0;
}

.refactor-three {
  background-color: #940006;
}

.refactor-four {
  background-color: #eeeeee;
}

.refactor-five {
  background-color: #e4cb00;
}

.refactor-six {
  background-color: #317c2e;
}

.refactor-seven {
  background-color: #081b26;
}

.refactor-eight {
  background-color: #111111;
}

.refactor-nine {
  background-color: #e2e6e9;
}

.refactor-ten {
  background-color: #fff;
}

.refactor-eleven {
  background-color: #333333;
}

.refactor-hardcode-one {
  background-color: #fff;
}

.refactor-hardcode-two {
  background-color: #fcb837;
}

.refactor-hardcode-three {
  background-color: #9eb6d7;
}

.refactor-hardcode-four {
  background-color: #777777;
}

SassMeister-rendered.html

<h3>Current Colors</h3>
<div class="current-one">one</div>
<div class="current-two">two</div>
<div class="current-three">three</div>
<div class="current-four">four</div>
<div class=current-five>five</div>
<div class="current-six">six</div>
<div class="current-seven">seven</div>
<div class="current-eight">eight</div>
<div class="current-nine">nine</div>
<div class="current-ten">ten</div>
<div class="current-eleven">eleven</div>
<div class="current-hardcode-one">hardcoded</div>
<div class="current-hardcode-two">hardcoded</div>
<div class="current-hardcode-three">hardcoded</div>
<div class="current-hardcode-four">hardcoded</div>
<hr>
<h3>Refactored Colors</h3>
<div class="refactor-one">one</div>
<div class="refactor-two">two</div>
<div class="refactor-three">three</div>
<div class="refactor-four">four</div>
<div class="refactor-five">five</div>
<div class="refactor-six">six</div>
<div class="refactor-seven">seven</div>
<div class="refactor-eight">eight</div>
<div class="refactor-nine">nine</div>
<div class="refactor-ten">ten</div>
<div class="refactor-eleven">eleven</div>
<div class="refactor-hardcode-one">hardcoded</div>
<div class="refactor-hardcode-two">now named</div>
<div class="refactor-hardcode-three">now named</div>
<div class="refactor-hardcode-four">now named</div>
<hr>