Generated by SassMeister.com.

SassMeister-input-HTML.html

<div data-theme="2">
  <div class="button">Button</div>
</div>
<div class="button">Button</div>

SassMeister-input.scss

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

$color-stack:
    (group: button, id: theme1, color: #e67835),
    (group: button, id: theme2, color: #f8a878),
    (group: button, id: theme3, color: #ad490c),
    (group: button, id: theme4, color: #426682),
    (group: title, id: theme1, color: #ff9900),
    (group: title, id: theme2, color: #9900ff),
    (group: title, id: theme3, color: #00ff99),
    (group: title, id: theme4, color: #0f0f0f);

// Color  Function
@function color($group, $shade:normal, $transparency:1){
  @each $color in $color-stack{
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);
    @if($group == map-get($color, group) and $shade == map-get($color, id)){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}

.button {
  background: color(button,theme1);
  @if  lightness(color(button,theme1)) > 50% {
    color: #fff;
  } @else {
    color: #000;
  }
  
  [data-theme="2"] & {
    background: color(button,theme2);
    
    @if lightness(color(button,theme1)) > 50%{
      color: #fff;
    } @else {
      color: #000;
    }
  }
}

SassMeister-output.css

.button {
  background: #e67835;
  color: #fff;
}
[data-theme="2"] .button {
  background: #f8a878;
  color: #fff;
}

SassMeister-rendered.html

<div data-theme="2">
  <div class="button">Button</div>
</div>
<div class="button">Button</div>