Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// 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;
}
}
#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;
}
@nemoDreamer

This comment has been minimized.

Copy link
Owner Author

nemoDreamer commented Jun 16, 2015

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...

@nemoDreamer

This comment has been minimized.

Copy link
Owner Author

nemoDreamer commented Jun 16, 2015

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"...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.