Skip to content

Instantly share code, notes, and snippets.

@GaryJones

GaryJones/gist:635b1aaea8a45f6c8833

Created August 21, 2014 23:13
Show Gist options
  • Save GaryJones/635b1aaea8a45f6c8833 to your computer and use it in GitHub Desktop.
Save GaryJones/635b1aaea8a45f6c8833 to your computer and use it in GitHub Desktop.
Download ZIP
Can this SCSS be optimised to avoid the position static / left auto / opacity 1 duplication?
Raw
gistfile1.scss
.genesis-nav-menu {
// ... other styles
.menu-item:hover,
.menu-item-hover {
position: static;
> .sub-menu { // Note the >
left: auto;
opacity: 1;
}
}
.menu-item > a:focus {
position: static;
+ .sub-menu { // Note the +
left: auto;
opacity: 1;
}
}
}
@GaryJones
Copy link
Author

Thanks Mike. I guess my mindset was stuck in de-duplicating the first part of the selectors as well.

@ezekg
Copy link

ezekg commented Aug 22, 2014

Something like this, maybe?

.genesis-nav-menu {
    // ...

    .menu-item {

        &:hover,
        &-hover {
          position: static;

            & > .sub-menu {
                left: auto;
                opacity: 1;
            }
        }

        & > a:focus {
          @extend .menu-item-hover;

            & + .sub-menu {
                @extend .sub-menu;
            }
        }
    }
}

Requires Sass ~> 4.0

http://sassmeister.com/gist/7660a578dbaf5d6d919f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment