Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
<div class="something03"></div>
<div class="something02"></div>
<div class="something01"></div>
<div class="something1"></div>
<div class="something2"></div>
<div class="something3"></div>
<div class="something4"></div>

</div>
<br><br><br><br><br><br>
<div>
<div class="something041"></div>
<div class="something031"></div>
<div class="something021"></div>
<div class="something011"></div>
<div class="something11"></div>
<div class="something21"></div>
<div class="something31"></div>
<div class="something41"></div>
<div class="something51"></div>

</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$black: #999999;

$black-darker3 : darken($black,36%);
$black-darker2 : darken($black,24%);
$black-darker1 : darken($black,12%);
$black-lighter1 : lighten($black,12%);
$black-lighter2 : lighten($black,24%);
$black-lighter3 : lighten($black,36%);

$blue: #9C1E5C;

$blue-darker3 : darken($blue,36%);
$blue-darker2 : darken($blue,24%);
$blue-darker1 : darken($blue,12%);
$blue-lighter1 : lighten($blue,12%);
$blue-lighter2 : lighten($blue,24%);
$blue-lighter3 : lighten($blue,36%);

div{
  width: 100%;
}

div > div{
  height: 100px;
  width: 100px;
  float: left;
}

.something03{
  background: $blue-darker3;
  margin-left: 100px;
}

.something02{
  background: $blue-darker2;
}

.something01{
  background: $blue-darker1;
}

.something1{
  margin: 0 10px;
  background: $blue;
}
.something2{
  background: $blue-lighter1;
}
.something3{
  background: $blue-lighter2;
}
.something4{
  background: $blue-lighter3;
}
.something041{
  background: black;
}
.something031{
  background: $black-darker3;
}

.something021{
  background: $black-darker2;
}

.something011{
  background: $black-darker1;
}

.something11{
  margin: 0 10px;
  background: $black;
}
.something21{
  background: $black-lighter1;
}
.something31{
  background: $black-lighter2;
}
.something41{
  background: $black-lighter3;
  border: 1px solid $black-lighter2;
  width: 98px;
  height: 98px;
}
.something51{
  background: white;
  border: 1px solid $black-lighter2;
  border-left:0;
  width: 98px;
  height: 98px;
}

SassMeister-output.css

div {
  width: 100%;
}

div > div {
  height: 100px;
  width: 100px;
  float: left;
}

.something03 {
  background: #020001;
  margin-left: 100px;
}

.something02 {
  background: #350a1f;
}

.something01 {
  background: #69143e;
}

.something1 {
  margin: 0 10px;
  background: #9C1E5C;
}

.something2 {
  background: #cf287a;
}

.something3 {
  background: #de5699;
}

.something4 {
  background: #e889b8;
}

.something041 {
  background: black;
}

.something031 {
  background: #3d3d3d;
}

.something021 {
  background: #5c5c5c;
}

.something011 {
  background: #7a7a7a;
}

.something11 {
  margin: 0 10px;
  background: #999999;
}

.something21 {
  background: #b8b8b8;
}

.something31 {
  background: #d6d6d6;
}

.something41 {
  background: whitesmoke;
  border: 1px solid #d6d6d6;
  width: 98px;
  height: 98px;
}

.something51 {
  background: white;
  border: 1px solid #d6d6d6;
  border-left: 0;
  width: 98px;
  height: 98px;
}

SassMeister-rendered.html

<div>
<div class="something03"></div>
<div class="something02"></div>
<div class="something01"></div>
<div class="something1"></div>
<div class="something2"></div>
<div class="something3"></div>
<div class="something4"></div>

</div>
<br><br><br><br><br><br>
<div>
<div class="something041"></div>
<div class="something031"></div>
<div class="something021"></div>
<div class="something011"></div>
<div class="something11"></div>
<div class="something21"></div>
<div class="something31"></div>
<div class="something41"></div>
<div class="something51"></div>

</div>