Operations/functions

operations.css

#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6; 
}
#navbar li {
  float: left;
  width: 150px;
  background-color: #e5a0e9;
}
#navbar li:hover {
  background-color: #d976e0;
}

operations.scss

#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;

  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;

  li {
    float: left;
    width: $navbar-width/$items - 10px;

    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}