Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="w">
  <div id="a">
    <h1>a</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>
<div class="w">
  <div id="b">
    <h1>b</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>
<div class="w">
  <div id="c">
    <h1>c</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

@function gray_scale($val: 127, $alpha: 1) {
  @return rgba($val, $val, $val, $alpha);
}
@function adjust_opacity($color, $opacity: 1) {
  @return adjust_color($color, $alpha: $opacity);
}
@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}
// color root map
$crtmp: (r: 63, g: 0, b: 233);
// color root
$crt: rgb(map-get($crtmp, r), map-get($crtmp, g), map-get($crtmp, b));
// override
$crt: magenta;
// color base darken
$cbdrkn: 0%;
// color base saturate
$cbstrt: 20%;
// color base hue
$cbh: 0deg;
// color base
$cb: desaturate(darken(adjust_hue($crt, $cbh), $cbdrkn), $cbstrt);
// color base hue+30deg, etc...
$cbh15: adjust_hue($cb, 15deg);
$cbh30: adjust_hue($cb, 30deg);
$cbh45: adjust_hue($cb, 45deg);
$cbh60: adjust_hue($cb, 60deg);
$cbh75: adjust_hue($cb, 75deg);

.w {
  @include clearfix;
  background: rgba(230, 77, 25, 0.1);
  width: 50%;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin: 2em auto;
}
.w div:first-child {
  background: adjust_opacity($cbh75, $opacity: -0.9);
  width: 50%;
  text-align: center;
  border: 1px solid gray_scale(0, 0.125);
  // margin: 2em auto;
}

#a, #b, #c {
  display: inline-block;
  float: left;
}

#a {
  color: $cb;
  p { color: $cbh30; }
}
#b {
  color: $cbh30;
  p { color: $cbh45; }
}
#c {
  color: $cbh45;
  p { color: $cbh15; }
}
.content {
  color: darken($cb, 33%);
  border: 2px dotted gray_scale(0, 0.125);
  width: 33%;
  margin: 0 auto;
  float: right;
}

SassMeister-output.css

.w {
  background: rgba(230, 77, 25, 0.1);
  width: 50%;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin: 2em auto;
}
.w:after {
  content: '';
  display: table;
  clear: both;
}

.w div:first-child {
  background: rgba(230, 77, 25, 0.1);
  width: 50%;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

#a, #b, #c {
  display: inline-block;
  float: left;
}

#a {
  color: #e619e5;
}
#a p {
  color: #e61980;
}

#b {
  color: #e61980;
}
#b p {
  color: #e6194c;
}

#c {
  color: #e6194c;
}
#c p {
  color: #e619b2;
}

.content {
  color: #4e094e;
  border: 2px dotted rgba(0, 0, 0, 0.125);
  width: 33%;
  margin: 0 auto;
  float: right;
}

SassMeister-rendered.html

<div class="w">
  <div id="a">
    <h1>a</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>
<div class="w">
  <div id="b">
    <h1>b</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>
<div class="w">
  <div id="c">
    <h1>c</h1>
    <p>fun with colors</p>
  </div>
  <div class="content">
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
    texttexttexttexttext
  </div>
</div>