Sometimes you want to set some CSS properties based on a class set high up in your DOM. JavaScript makes this fairly easy, but let's do it with Sass instead.

1-variables.scss

$states: state1 #00adee, state2 #ffc10e, state3 #ec145a;
$color_selectors: null;

2-mixins.scss

// Use the current state color for properties of a selector.
//
// $selector - CSS selector to use.
// $properties - List of properties that will be set to the color.
@mixin use-current-color($selector, $properties) {
  $color_selectors: append($color_selectors, ($selector $properties), 'comma');
}

// Output the CSS for each set selector, for each state class.
@mixin output-current-color-selectors() {
  @each $state in $states {
    $name: nth($state, 1);
    $color: nth($state, 2);
    
    // Assume the classname is .active-state1, .active-state2, etc.
    .active-#{$name} {
      @each $list in $color_selectors {
        @if length($list) > 1 {
          $selector: nth($list, 1);
          $properties: nth($list, 2);
          
          #{$selector} {
            @each $property in $properties {
              #{$property}: #{$color};
            }
          }
        }
      }
    }
  }
}

3-setup.scss

@include use-current-color('.popover', color border-color);
@include use-current-color('.box', background-color);

.popover {
  padding: 5px 10px;
}

.box {
  width: 100px;
  height: 100px;
}

4-output.css

.state1 .popover {
  color: #00adee;
  border-color: #00adee;
}

.state1 .box {
  background-color: #00adee;
}

.state2 .popover {
  color: #ffc10e;
  border-color: #ffc10e;
}

.state2 .box {
  background-color: #ffc10e;
}

.state3 .popover {
  color: #ec145a;
  border-color: #ec145a;
}

.state3 .box {
  background-color: #ec145a;
}

.popover {
  padding: 5px 10px;
}

.box {
  width: 100px;
  height: 100px;
}