Using SASS lists to ease irregular menu theming

menu.scss

/* CSS3Please.com gradient mixin */
@mixin gradient($begin, $end) {
  background-color: $begin;
  background-image: -moz-linear-gradient(top, $begin, $end); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $begin),color-stop(1, $end)); /* Saf4+, Chrome */
  background-image: linear-gradient(top, $begin, $end);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$begin', EndColorStr='$end'); /* IE6–IE9 */
  @include has-layout;
}

/* Simple hasLayout trigger */
@mixin has-layout() {
  zoom: 1;
}

/* Default width and gutter size */
$defWidth = 960px;
$defGut = 10px;

/* Examplatory colors, 6 & 7 are the same as 1 for now */
$menu-a-1: #627e25;
$menu-b-1: #304c00;
$menu-a-2: #b7c023;
$menu-b-2: #858e00;
$menu-a-3: #c8d725;
$menu-b-3: #96a500;
$menu-a-4: #c5cf63;
$menu-b-4: #949e32;
$menu-a-5: #d2dc6b;
$menu-b-5: #a1ab3a;
$menu-a-6: $menu-a-1;
$menu-b-6: $menu-b-1;
$menu-a-7: $menu-a-1;
$menu-b-7: $menu-b-1;

/* Build a nested list of the colors */
$menu-colors: (($menu-a-1, $menu-b-1), ($menu-a-2, $menu-b-2), ($menu-a-3, $menu-b-3), ($menu-a-4, $menu-b-4), ($menu-a-5, $menu-b-5), ($menu-a-6, $menu-b-6), ($menu-a-7, $menu-b-7));

/* Apply the styles to the menu items,
   
@for $i from 1 through 7 {
  ul.menu-#{$i}-items {
    li {
      width: ($defWidth - ($defGut * 2)) / $i;
    }
  }
  a.item-#{$i} {
    @include gradient(nth(nth($menu-colors, $i), 1), nth(nth($menu-colors, $i), 2));
    &:hover,
    &:active,
    &:focus,
    &.active {
      @include gradient(nth(nth($menu-colors, $i), 2), nth(nth($menu-colors, $i), 1));
      text-decoration: underline;
    }
  }
}