This is a mixing that lets me have a different colour for my navigation and masthead/header on each page of my personal portfolio

navigation mixin

@mixin navigation-menu-mixin (
  $color: red, 
  $background: red, 
  $active: 35, 
  $hover: 55,
  $hover-background-tint: 15, 
  $anchor: 38, 
  $active-background-tint: 20
  ) {
  @extend .navigation--menu;

  .button {
    color: tint($background, $hover-background-tint - 10);
    @include transition(color .25s $ease-out-quad);

    &:hover, &:focus, &:visited:hover {
      color: tint($background, $hover-background-tint + 20);
    };
  }
  li {
    a {
    color: shade($color, $anchor);
    background-color: shade($color, 4);

    &:hover, &:focus {
      color: shade($color, $hover);
      background-color: tint($background, $hover-background-tint);
    }
  }
  
  }
  .active {
    @extend %active;
    color: shade($color, $active);
    background: tint($color, $active-background-tint);    
  }
}