frontendmasters.com resources

menubar.scss

$menubar-height: 1.3em;
$menubar-padding: 0.7em;
$menubar-bg-color: $primary-dark-color;
$menubar-text-color: $primary-light-color;
$menubar-hover-text-color: darken($menubar-bg-color, 10);
$menubar-hover-bg-color: lighten($menubar-bg-color, 20);

$menubar-active-text-color: lighten($menubar-bg-color, 10);
$menubar-active-bg-color: lighten($menubar-bg-color, 50) !default;

.menubar {
  background: $menubar-bg-color;
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        @include transition(all 0.3s);
        display: inline-block;
        text-decoration: none;
        font-size: $menubar-height;
        padding: $menubar-padding;
        color: $menubar-text-color;
        &:hover {
          color: $menubar-hover-text-color;
          background: $menubar-hover-bg-color;
        }
        &.active {
          color: $menubar-active-text-color;
          background: $menubar-active-bg-color;
        }
      }
    }
  }
}