Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="green">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>


<div class="blue">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="yellow">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// ----

@import 'breakpoint';

@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i))
    }
    @return map-fetch($value, $rest)
  } @else {
    @return $value;
  }
}

@function get-value($maps, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($maps, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i));
    }
    @return get-value($value, $rest)
  } @else {
    @if $value {
      @return $value;
    } @else {
      @return false;
    }
  }
}

@mixin palette-property($property, $value, $breakpoint: false) {
  $parent: &;
  $properties: ();
  @if($properties) {
    $properties: map-merge($properties, ($property: $value));
    $selectors: map-merge($selectors, ($parent: (breakpoint:$breakpoint, properties:$properties))) !global;
  }
  @else {
    $selectors: map-merge($selectors, ($parent: (breakpoint:$breakpoint, properties:$properties))) !global;
    content: inspect($properties);
  }
}


@mixin palette-property-apply($palettes, $selectors) {
  @each $theme, $palette in $palettes {
    .#{$theme} {
      @each $selector, $config in $selectors {
        #{$selector} {
          $properties: map-get($config, properties);
          $breakpoint: map-get($config, breakpoint);
          @if($breakpoint) {
            @include breakpoint($breakpoint) {
              @each $property, $value in $properties {
                #{$property}: get-value($palettes, $theme $value);
              }
            }
          }
          @else {
            @each $property, $value in $properties {
              #{$property}: get-value($palettes, $theme $value);
            }
          }
          
        }
      }
    }
  }
}


$palettes: (
  green: (
    layer-1: rgba(green, .2),
    layer-2: rgba(green, .4),
    layer-3: rgba(green, .6),
    layer-4: rgba(green, .8),
    hover: green,
  ),
  blue: (
    layer-1: rgba(blue, .2),
    layer-2: rgba(blue, .4),
    layer-3: rgba(blue, .6),
    layer-4: rgba(blue, .8),
    hover: blue,
  ),
  yellow: (
    layer-1: rgba(yellow, .2),
    layer-2: rgba(yellow, .4),
    layer-3: rgba(yellow, .6),
    layer-4: rgba(yellow, .8),
    hover: yellow,
  ),
);

$selectors: () !default;


* {
  box-sizing: border-box;
}

%component__box-padding {
  position:absolute;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 1rem;
}

.component,
%component {
  width: 250px;
  height: 250px;
  padding: 1rem;
  background: white;
}

.component__layer-1,
%component__layer-1 {
  @extend %component__box-padding;
  @include palette-property(background, layer-1, 1000px);
  &:hover {
    @include palette-property(background, hover);
    cursor: pointer;
  }
}

.component__layer-2,
%component__layer-2 {
  @extend %component__box-padding;
  @include palette-property(background, layer-2);
}

.component__layer-3,
%component__layer-3 {
  @extend %component__box-padding;
  @include palette-property(background, layer-3);
}

.component__layer-4,
%component__layer-4 {
  @extend %component__box-padding;
  @include palette-property(background, layer-4);
}


@include palette-property-apply($palettes, $selectors);

SassMeister-output.css

* {
  box-sizing: border-box;
}

.component__layer-1, .component__layer-2, .component__layer-3, .component__layer-4 {
  position: absolute;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 1rem;
}

.component {
  width: 250px;
  height: 250px;
  padding: 1rem;
  background: white;
}

.component__layer-1:hover {
  cursor: pointer;
}

@media (min-width: 1000px) {
  .green .component__layer-1 {
    background: rgba(0, 128, 0, 0.2);
  }
}
.green .component__layer-1:hover {
  background: green;
}
.green .component__layer-2 {
  background: rgba(0, 128, 0, 0.4);
}
.green .component__layer-3 {
  background: rgba(0, 128, 0, 0.6);
}
.green .component__layer-4 {
  background: rgba(0, 128, 0, 0.8);
}

@media (min-width: 1000px) {
  .blue .component__layer-1 {
    background: rgba(0, 0, 255, 0.2);
  }
}
.blue .component__layer-1:hover {
  background: blue;
}
.blue .component__layer-2 {
  background: rgba(0, 0, 255, 0.4);
}
.blue .component__layer-3 {
  background: rgba(0, 0, 255, 0.6);
}
.blue .component__layer-4 {
  background: rgba(0, 0, 255, 0.8);
}

@media (min-width: 1000px) {
  .yellow .component__layer-1 {
    background: rgba(255, 255, 0, 0.2);
  }
}
.yellow .component__layer-1:hover {
  background: yellow;
}
.yellow .component__layer-2 {
  background: rgba(255, 255, 0, 0.4);
}
.yellow .component__layer-3 {
  background: rgba(255, 255, 0, 0.6);
}
.yellow .component__layer-4 {
  background: rgba(255, 255, 0, 0.8);
}

SassMeister-rendered.html

<div class="green">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>


<div class="blue">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="yellow">
  <div class="component">
      <div class="component__layer-1">
          <div class="component__layer-2">
              <div class="component__layer-3">
                  <div class="component__layer-4">
                    asdf
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>