Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$nav_light_color: white;
$nav_dark_color: black;

%base_nav_item {
    color: darken($nav_light_color, 25);

    .sg_dark_theme & {
        color: lighten($nav_dark_color, 25);
    }

    &.selected,
    &.active div.overlay_button,
    &.active div.button,
    &:hover {
        color: $nav_light_color;

        .sg_dark_theme & {
          color: $nav_dark_color;
        }
    }

    // nest children in here, and they'll get used for @extend as well!

    .button {
      border: 1px solid rgba($nav_dark_color, .5);
      
      .sg_dark_theme & {
        border-color: rgba($nav_light_color, .5);
      }
    }
}

// and then use @extend for fully cascading sg_dark_theme support!

#sg_global_nav div.nav_item {
  @extend %base_nav_item;
  
  // define one-off exceptions to your placeholder:
  
  background-color: gray;
  
  .sg_dark_theme & {
    background-color: blue;
  }
}

SassMeister-output.css

#sg_global_nav div.nav_item {
  color: #bfbfbf;
}

.sg_dark_theme #sg_global_nav div.nav_item, #sg_global_nav .sg_dark_theme div.nav_item {
  color: #404040;
}

#sg_global_nav div.selected.nav_item,
#sg_global_nav div.active.nav_item div.overlay_button,
#sg_global_nav div.active.nav_item div.button,
#sg_global_nav div.nav_item:hover {
  color: white;
}

.sg_dark_theme #sg_global_nav div.selected.nav_item,
#sg_global_nav .sg_dark_theme div.selected.nav_item, .sg_dark_theme #sg_global_nav div.active.nav_item div.overlay_button,
#sg_global_nav .sg_dark_theme div.active.nav_item div.overlay_button, .sg_dark_theme #sg_global_nav div.active.nav_item div.button,
#sg_global_nav .sg_dark_theme div.active.nav_item div.button, .sg_dark_theme #sg_global_nav div.nav_item:hover, #sg_global_nav .sg_dark_theme div.nav_item:hover {
  color: black;
}

#sg_global_nav div.nav_item .button {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.sg_dark_theme #sg_global_nav div.nav_item .button, #sg_global_nav .sg_dark_theme div.nav_item .button {
  border-color: rgba(255, 255, 255, 0.5);
}

#sg_global_nav div.nav_item {
  background-color: gray;
}

.sg_dark_theme #sg_global_nav div.nav_item {
  background-color: blue;
}