SCSS list

@import "base";
@import "compass";

$radius: 6px;
$offwhite: #FAFAFA;
$grey: #ccc;
$lightgreylines: #EDEDED;
$darkgrey: #666;
$cyan: #00C3E9;
$red: #EB1228;
$borderbottom: 4px;

%nav-button {
    background-color: #fff; // Old browsers
}

%nav-button-on {
    background-color: #2f3684; // Old browsers
    border-bottom: $borderbottom solid #F31A35;
    a { color: $red;}
}

@mixin li-image($icon) {
    @include background-image(url('../images/'+$icon+'.png'));
}

@mixin li-image-on($icon) {
    @include background-image(url('../images/'+$icon+'-on.png'));
}

li {
    @each $item in dashboard, challenges, goals, activity, destinations, fitness {
        &.#{$item} {
           @extend %nav-button;
           @include li-image($item);
           &:hover {
               @extend %nav-button-on;
               @include li-image-on($item);
           }
        }
        .#{$item} &.#{$item} {
          @extend %nav-button-on;
          @include li-image-on($item);
        }
    }
}