The shade and tint functions

Compass has another two functions you might find handy: shade and tint. The shade function mixes the color with a percentage of black while tint mixes the color with a percentage of white. Let's adjust the fourth and fifth list item links with these two functions:

&:nth-child(4) a {
  background-color: shade($color1,60%);
}
&:nth-child(5) a {
  background-color: tint($color1,60%);
}

The following screenshot shows what that produces in the browser:

Note

These two functions are handy when it comes to converting graphics composites where designers have added highlight and lowlight lines. Often this is achieved in Photoshop and Fireworks by adding thin lines of white or black and then using transparency to fade them over a background color. When applied to a color value that would be the color underneath the highlight line in the graphics application, the tint and shade functions will produce an equivalent color value in the browser.