jdsteinbach
7/16/2014 - 4:13 PM

Generated by SassMeister.com.

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