Allow for theme specific properties to allow for colour scheming without manual overrides.

SassMeister-input.scss

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

@function map-get-nested($map, $keys...) {
  @each $key in $keys {
    @if type-of($map) != 'map' {
      @return $map;
    }
    $map: map-get($map, $key);
  }
  @return $map;
}
 
@function map-merge-nested($map, $keys-and-value...) {
  $keys-and-value-length: length($keys-and-value);
  $key-length: $keys-and-value-length - 1;
  $value: nth($keys-and-value, $keys-and-value-length);
  $value-is-map: type-of($value) == 'map';
 
  @if $key-length == 0 {
    $value: map-merge($map, if($value-is-map or length($value) == 0, $value, ($value: ())));
  } @else {
    @for $i from if($value-is-map, 0, 1) through $key-length {
      $new: if($i == 0, $value, (nth($keys-and-value, $keys-and-value-length - $i): $value));
      $old: if($i == $key-length, $map, map-get-nested($map, slice($keys-and-value, 1, $key-length - $i)...) or ());
      $value: if(type-of($old) == 'map', map-merge($old, $new), $new);
    }
  }
  @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 debug-map($map) {
  @debug-map {
    __inspect__: inspect($map);
    __length__: length($map);
    __properties__ {
      @each $key, $value in $map {
        #{"(" + type-of($value) + ") " + $key}: $value;
      }
    }
  }
}

$palettes: (
 default: (
    color-1: green,
    color-2: yellow
  ),
  theme-1: (
    color-1: red,
    color-2: pink
  ),
  theme-2: (
    color-1: blue,
    color-2: purple
  ), 
);

$selectors: () !default;

@mixin palette-property($property, $value) {
  $parent: &;
  $selectors: map-merge-nested($selectors, ($parent: ($property:$value))) !global;
  #{$property}: get-value($palettes, default $value);
}


.my-component {
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  content: 'random properties';
  @include palette-property(color, color-1);
  &:hover {
    @include palette-property(color, color-2);
  }
}

.my-component__item {
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  content: 'random properties';
  @include palette-property(background, color-2);
}

@each $theme, $palette in $palettes {
  @if $theme != 'default' {
    .#{$theme} {
      @each $selector, $properties in $selectors {
        #{$selector} {
          @each $property, $value in $properties {
            #{$property}: get-value($palettes, $theme $value);
          }
        }
      }
    }
  }
}
  







 

SassMeister-output.css

.my-component {
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  content: 'random properties';
  color: green;
}
.my-component:hover {
  color: yellow;
}

.my-component__item {
  display: block;
  display: block;
  display: block;
  display: block;
  display: block;
  content: 'random properties';
  background: yellow;
}

.theme-1 .my-component {
  color: red;
}
.theme-1 .my-component:hover {
  color: pink;
}
.theme-1 .my-component__item {
  background: pink;
}

.theme-2 .my-component {
  color: blue;
}
.theme-2 .my-component:hover {
  color: purple;
}
.theme-2 .my-component__item {
  background: purple;
}