Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";
$base: #e3161a;
$lighter: lighten($base, 10%);
$darker: darken($base, 10%);
$complement: lighten(complement($base), 40%);
.box {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 10px;
  border: 1px solid black;
  font: 40px/200px sans-serif;
  text-align: center;
  color: $complement;
}
.box:nth-of-type(1) { background: linear-gradient(top, $lighter, $darker); }
.box:nth-of-type(2) { background: $lighter; }
.box:nth-of-type(3) { background: $darker; }
.box:nth-of-type(4) { background: $complement; }

SassMeister-output.css

.box { width: 200px; height: 200px; float: left; margin-right: 10px; border: 1px solid black; font: 40px/200px sans-serif; text-align: center; color: #cbfaf9; }

.box:nth-of-type(1) { background: linear-gradient(to bottom, #ec4043, #b51115); }

.box:nth-of-type(2) { background: #ec4043; }

.box:nth-of-type(3) { background: #b51115; }

.box:nth-of-type(4) { background: #cbfaf9; }

SassMeister-rendered.html

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>