i wanted dynamic variable names in sass. it doesn't do everything i expected. sadface panda needs to get hacking.

dynamic-variable-names.scss

$whatson: #ed8f25;
$whatsonBg: lighten($whatson, 20%);
$childcare: #7c398a;
$childcareBg: lighten($childcare, 40%);
$health: #9cc700;
$healthBg: lighten($health, 30%);
$shopping: #0065fd;
$shoppingBg: lighten($shopping, 30%);
$groups: #cb0033;
$groupsBg: lighten($groups, 50%);
$family: #6600fe;
$familyBg: lighten($family, 40%);
$eating: #0e3352;
$eatingBg: lighten($eating, 50%);

/* This method would be awesome, but SASS doesn't support it. */
/*
$categories: whatson childcare health shopping groups family eating;
@each $category in $categories {
  .category-#{$category} #header {
    border-bottom-color: $#{$category}; // dynamic variable name 
  }
  #main-menu-links a.menu-#{$category},
  #main-menu-links li.active-trail a.menu-#{$category} {
    border-color: $#{$category}; // dynamic variable name
    background-color: $#{$category}Bg; // dynamic variable name
  }
}
*/
/* So this instead. Blah. */

.category-whatson #header {
  border-bottom-color: $whatson;
}
#main-menu-links a.menu-whatson,
#main-menu-links li.active-trail a.menu-whatson {
  border-color: $whatson;
  background-color: $whatsonBg;
}

.category-childcare #header {
  border-bottom-color: $childcare;
}
#main-menu-links a.menu-childcare,
#main-menu-links li.active-trail a.menu-childcare {
  border-color: $childcare;
  background-color: $childcareBg;
}

.category-health #header {
  border-bottom-color: $health;
}
#main-menu-links a.menu-health,
#main-menu-links li.active-trail a.menu-health {
  border-color: $health;
  background-color: $childcareBg;
}

.category-shopping #header {
  border-bottom-color: $shopping;
}
#main-menu-links a.menu-shopping,
#main-menu-links li.active-trail a.menu-shopping {
  border-color: $shopping;
  background-color: $shoppingBg;
}

.category-groups #header {
  border-bottom-color: $groups;
}
#main-menu-links a.menu-groups,
#main-menu-links li.active-trail a.menu-groups {
  border-color: $groups;
  background-color: $groupsBg;
}

.category-family #header {
  border-bottom-color: $family;
}
#main-menu-links a.menu-family,
#main-menu-links li.active-trail a.menu-family {
  border-color: $family;
  background-color: $familyBg;
}

.category-health #header {
  border-bottom-color: $health;
}
#main-menu-links a.menu-health,
#main-menu-links li.active-trail a.menu-health {
  border-color: $health;
  background-color: $healthBg;
}

.category-eating #header {
  border-bottom-color: $eating;
}
#main-menu-links a.menu-eating,
#main-menu-links li.active-trail a.menu-eating {
  border-color: $eating;
  background-color: $eatingBg;
}

#main-menu-links a {
  border-width: 2px 2px 0 2px;
  border-color: #aaa;
  border-style: solid;
  height: 28px;
}

#main-menu-links a.active {
  margin-bottom: -4px !important; /* @FIXME */
  z-index: 2;
  padding-bottom: 2px;
}

sass/sass#132