Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="bloque01"></div>
<div class="bloque02"></div>
<div class="bloque03"></div>
<div class="bloque04"></div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

$color: black;

.bloque01,
.bloque02,
.bloque03,
.bloque04 {
  height:20px;
  background:$color;
}

.bloque02 {background:lighten($color, 10%);}
.bloque03 {background:lighten($color, 20%);}
.bloque04 {background:lighten($color, 30%);}

SassMeister-output.css

.bloque01,
.bloque02,
.bloque03,
.bloque04 {
  height: 20px;
  background: black;
}

.bloque02 {
  background: #1a1a1a;
}

.bloque03 {
  background: #333333;
}

.bloque04 {
  background: #4d4d4d;
}

SassMeister-rendered.html

<div class="bloque01"></div>
<div class="bloque02"></div>
<div class="bloque03"></div>
<div class="bloque04"></div>