Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="gray-base"></div>
<div class="gray-darker"></div>
<div class="gray-dark"></div>
<div class="gray"></div>
<div class="gray-light"></div>
<div class="gray-lighter"></div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$gray-base: #000;
$gray-darker: lighten($gray-base, 13.5%);
$gray-dark: lighten($gray-base, 20%);
$gray: lighten($gray-base, 33.5%);
$gray-light: lighten($gray-base, 46.7%);
$gray-lighter: lighten($gray-base, 93.5%);

.gray-base {background: $gray-base;}
.gray-darker {background: $gray-darker;}
.gray-dark {background: $gray-dark;}
.gray {background: $gray;}
.gray-light {background: $gray-light;}
.gray-lighter {background: $gray-lighter;}

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  
}

SassMeister-output.css

.gray-base {
  background: #000; }

.gray-darker {
  background: #222222; }

.gray-dark {
  background: #333333; }

.gray {
  background: #555555; }

.gray-light {
  background: #777777; }

.gray-lighter {
  background: #eeeeee; }

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block; }

SassMeister-rendered.html

<div class="gray-base"></div>
<div class="gray-darker"></div>
<div class="gray-dark"></div>
<div class="gray"></div>
<div class="gray-light"></div>
<div class="gray-lighter"></div>