CSS Navigation : refactored

gistfile1.css

$navheight: 61px;

#navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: $navheight;
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline;
    float: left;
    margin: 0;
    height: $navheight;
    padding: 0;
  }
  a {
    display: inline;
    float: left;
    padding-top: $navheight;
    height: 0;
    overflow: hidden;
    background: url('../images/navigation.png') 0 0 no-repeat;
  }
}
  $n1: 45px;
  $n2: 93px;
  $n3: 93px;
  $n4: 60px;
  
  @mixin nav($w, $p, $class) {
    width: $w;
    background-position: -($p) 0;
    .#{$class} &,
    &:hover {
      background-position: -($p) (-($navheight));
    }
  }
  /* Active state when body has a certain class */
  #n1 a { @include nav($n1, 0, 'homepage'); }
  #n2 a { @include nav($n2, $n1, 'about-us'); }
  #n3 a { @include nav($n3, #{$n2 + $n1}, 'news'); }
  #n4 a { @include nav($n4, #{$n3 + $n2 + $n1}, 'contact'); }