Generated by SassMeister.com.
/* The Old Way */
.nav-menu .item,
.nav-menu li,
.footer-menu .item,
.footer-menu li {
float: left;
}
.nav-menu .item a,
.nav-menu li a,
.footer-menu .item a,
.footer-menu li a {
color: blue;
}
.nav-menu .item:hover a,
.nav-menu li:hover a,
.footer-menu .item:hover a,
.footer-menu li:hover a {
color: purple;
}
.nav-menu .item .sub-menu,
.nav-menu li .sub-menu,
.footer-menu .item .sub-menu,
.footer-menu li .sub-menu {
display: none;
}
.nav-menu .item:hover .sub-menu,
.nav-menu li:hover .sub-menu,
.footer-menu .item:hover .sub-menu,
.footer-menu li:hover .sub-menu {
display: block;
}
/* The 3.4 way "Micah Style" */
.nav-menu .item,
.nav-menu li,
.footer-menu .item,
.footer-menu li {
float: left;
}
.nav-menu .item a,
.nav-menu li a,
.footer-menu .item a,
.footer-menu li a {
color: blue;
}
.nav-menu li:hover a, .nav-menu .item:hover a, .nav-menu li:hover a, .nav-menu .item:hover a, .footer-menu li:hover a, .footer-menu .item:hover a, .footer-menu li:hover a, .footer-menu .item:hover a {
color: purple;
}
.nav-menu .item .sub-menu,
.nav-menu li .sub-menu,
.footer-menu .item .sub-menu,
.footer-menu li .sub-menu {
display: none;
}
.nav-menu li:hover .sub-menu, .nav-menu .item:hover .sub-menu, .nav-menu li:hover .sub-menu, .nav-menu .item:hover .sub-menu, .footer-menu li:hover .sub-menu, .footer-menu .item:hover .sub-menu, .footer-menu li:hover .sub-menu, .footer-menu .item:hover .sub-menu {
display: block;
}
/* The 3.4 way "James Style" */
.nav-menu .item,
.nav-menu li,
.footer-menu .item,
.footer-menu li {
float: left;
}
.nav-menu .item a,
.nav-menu li a,
.footer-menu .item a,
.footer-menu li a {
color: blue;
}
.nav-menu .item:hover a, .nav-menu li:hover a, .footer-menu .item:hover a, .footer-menu li:hover a {
color: purple;
}
.nav-menu .item .sub-menu,
.nav-menu li .sub-menu,
.footer-menu .item .sub-menu,
.footer-menu li .sub-menu {
display: none;
}
.nav-menu .item:hover .sub-menu, .nav-menu li:hover .sub-menu, .footer-menu .item:hover .sub-menu, .footer-menu li:hover .sub-menu {
display: block;
}
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
/* The Old Way */
.nav-menu,
.footer-menu {
.item,
li {
float: left;
a {
color: blue;
}
&:hover a {
color: purple;
}
.sub-menu {
display: none;
}
&:hover .sub-menu {
display: block;
}
}
}
/* The 3.4 way "Micah Style" */
@mixin context($old-context, $new-context) {
@at-root #{selector-replace(&, $old-context, $new-context)} {
@content;
}
}
.nav-menu,
.footer-menu {
.item,
li {
float: left;
a {
color: blue;
@include context(('li','.item'),('li:hover','.item:hover')) {
color: purple;
}
}
.sub-menu {
display: none;
@include context(('li','.item'),('li:hover','.item:hover')) {
display: block;
}
}
}
}
/* The 3.4 way "James Style" */
@mixin parent-hover() {
$selector: &;
@each $list in & {
$parent: nth($list,length($list)-1);
$selector: selector-replace($selector,$parent,$parent+':hover');
}
@at-root #{$selector} {
@content;
}
}
.nav-menu,
.footer-menu {
.item,
li {
float: left;
a {
color: blue;
@include parent-hover {
color: purple;
}
}
.sub-menu {
display: none;
@include parent-hover {
display: block;
}
}
}
}