Right, back to colors. Let's bring together a few of the techniques we have learnt in this and previous chapters to convert the top links (currently sitting on the right-hand side of the header area) into buttons.

We will create a mixin that will let us easily create button variations, providing various foreground and background colors. As ever, when writing a custom mixin, the pay off is greater the more often the job needs repeating. In our little site, it's arguably not worth the bother, but the technique is worth understanding for that occasion when multiple yet varied versions of a similar style are required.

The _mixins.scss partial is where the following code will be added.

Don't be alarmed, the following code might look like gibberish, but it will make sense shortly:

@mixin button-links($button-base: darken($color11,10%),$button-hover: darken($color11,15%)) {
  border: 1px solid darken($color11,16%);
  padding: .3em .6em;
  margin-left: .7em;
  @include border-radius(8px...