Cacher is the code snippet organizer for pro developers

<div class='container-1'>
  <div class='light-body'>Donec id elit non mi porta gravida at eget metus.</div>
  <div class='dark-body'>Donec id elit non mi porta gravida at eget metus.</div>
</div>
<div class='container-2'>
  <div class='light-body'>Donec id elit non mi porta gravida at eget metus.</div>
  <div class='dark-body'>Donec id elit non mi porta gravida at eget metus.</div>
</div>

div div {
  margin: 1em;
  padding: 1em;
  width: 10em;
  border: 1px solid #F36B21;
  float: left;
}

.container-1 .light-body {
  background: #fff;
  color: #f69058;
  color: rgba(243, 107, 33, 0.75);
}
.container-1 .dark-body {
  background: #222;
  color: #be5821;
  color: rgba(243, 107, 33, 0.75);
}

.container-2 .light-body {
  background: #fff;
  color: #f69058;
}
.container-2 .dark-body {
  background: #222;
  color: #f69058;
  color: rgba(243, 107, 33, 0.75);
}

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

$orange: #F36B21;
$background-dark: #222;
$background-light: #fff;

@mixin rgba-fallback($property, $color, $opacity, $background: light) {
  $background-color: $background-light;
  @if $background == dark {
    $background-color: $background-dark;
  }
  #{$property}: mix($color, $background-color, ($opacity*100%));
  #{$property}: rgba($color, $opacity);
}
@mixin rgba-fallback-only($property, $color, $opacity, $background: light) {
  $background-color: $background-light;
  @if $background == dark {
    $background-color: $background-dark;
  }
  #{$property}: mix($color, $background-color, ($opacity*100%));
}
div div {
  margin: 1em;
  padding: 1em;
  width: 10em;
  border: 1px solid $orange;
  float: left;
}
.container-1 {
  .light-body {
    background: $background-light;
    @include rgba-fallback(color, $orange, .75);
  }
  
  .dark-body {
    background: $background-dark;
    @include rgba-fallback(color, $orange, .75, dark);
  }
}
.container-2 {
  .light-body {
    background: $background-light;
    @include rgba-fallback-only(color, $orange, .75);
  }
  
  .dark-body {
    background: $background-dark;
    @include rgba-fallback(color, $orange, .75);
  }
}

.container-1
  .light-body Donec id elit non mi porta gravida at eget metus.
  .dark-body Donec id elit non mi porta gravida at eget metus.
.container-2
  .light-body Donec id elit non mi porta gravida at eget metus.
  .dark-body Donec id elit non mi porta gravida at eget metus.