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 black;
      
      .sg_dark_theme & {
        border-color: white;
      }
    }
}

// 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: $nav_dark_color;
  
  .sg_dark_theme & {
    background-color: $nav_light_color;
  }
}

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 black;
}

.sg_dark_theme #sg_global_nav div.nav_item .button, #sg_global_nav .sg_dark_theme div.nav_item .button {
  border-color: white;
}

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

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

Notice how it's always

• general rule:
  • default definition
  • "dark theme &" override

and you nest that structure as often as you want, for pseudo-selectors, children, etc...

Better:

https://gist.github.com/nemoDreamer/b1338dd3b0cb202ae479

I don't know why its doing .sg_dark_theme #sg_global_nav div.nav_item .button, #sg_global_nav .sg_dark_theme div.nav_item .button on the nested items, when the & should only do ".sg_dark_theme and this selector"...