Menu CSS to SCSS

style.css

/* =Menu
-------------------------------------------------------------- */
div.menu { width: 570px; height: 72px; float: left; margin: 0 auto; padding: 22px 0 0 0; }
div.menu ul { width: 570px; height: 33px; margin: 0; padding: 0; float: left; background: url("images/mainnav.gif") no-repeat top left; }
div.menu ul li { list-style-type: none; float: left; margin: 0; padding: 0; display: inline; height: 33px; }
div.menu ul li a { display: block; height: 33px; text-indent: -9999px; outline: none; margin: 0; }

div.menu ul li.nav_home a { width: 86px; }
div.menu ul li.nav_bio a { width: 55px; }
div.menu ul li.nav_shows a { width: 62px; }
div.menu ul li.nav_music a { width: 82px; }
div.menu ul li.nav_video a { width: 88px; }
div.menu ul li.nav_photos a { width: 103px; }
div.menu ul li.nav_store a { width: 94px; }

div.menu ul li.nav_home a:hover { background: url(images/mainnav.gif) no-repeat 0px (-1 * $menu-height); }
div.menu ul li.nav_bio a:hover { background: url(images/mainnav.gif) no-repeat -86px -33px; }
div.menu ul li.nav_shows a:hover { background: url(images/mainnav.gif) no-repeat -141px -33px; }
div.menu ul li.nav_music a:hover { background: url(images/mainnav.gif) no-repeat -203px -33px; }
div.menu ul li.nav_video a:hover { background: url(images/mainnav.gif) no-repeat -285px -33px; }
div.menu ul li.nav_photos a:hover { background: url(images/mainnav.gif) no-repeat -373px -33px; }
div.menu ul li.nav_store a:hover { background: url(images/mainnav.gif) no-repeat -476px -33px; }

style.scss

/* =Menu
-------------------------------------------------------------- */
@mixin nav_element($element, $position, $offset, $height) {
  ul li.nav_#{$element} a { width: $position; }
  ul li.nav_#{$element} a:hover { background: url(images/mainnav.gif) no-repeat $offset (-1 * $height); }
}

div.menu {
  $nav-height: 72px;
  $menu-height: 33px;
  $menu-width: 570px;
  $menu-padding: 22px;
  
  width: $menu-width; height: $nav-height; float: left; margin: 0 auto; padding: $menu-padding 0 0 0;  
  ul { width: $menu-width; height: $menu-height; margin: 0; padding: 0; float: left; background: url(images/mainnav.gif) no-repeat top left; }
  ul li { list-style-type: none; float: left; margin: 0; padding: 0; display: inline; height: $menu-height; }
  ul li a { display: block; height: $menu-height; text-indent: -9999px; outline: none; margin: 0; }

  
  @include nav_element(home,    86px,     0px, $menu-height);
  @include nav_element(bio,     55px,   -86px, $menu-height);
  @include nav_element(shows,   62px,  -141px, $menu-height);
  @include nav_element(music,   82px,  -203px, $menu-height);
  @include nav_element(video,   88px,  -285px, $menu-height);
  @include nav_element(photos,  103px, -373px, $menu-height);
  @include nav_element(store,   94px,  -476px, $menu-height);
}