Putting it all together

We've already combined color functions in the earlier mixin near the beginning of this chapter. However, the process for combining functions perhaps bears repeating with an example.

Need a 0.7 alpha layer on an RGBA color that's a 30 percent mix of two colors? The following code describes how you'd do that:

&:nth-child(9) a {
  background-color: rgba((mix($color1,$color2,60%)),.7);
}

And the following screenshot is the result in the browser (note that, a repeating background image has been added to the body to demonstrate the alpha channel of the color):

The syntax for combining color functions does look intimidating at first, but once you've started to adjust colors in this manner you'll find it saves a lot of time. No need to open color pickers. Instead, with Sass and Compass, we can test colors directly in the browser.

Tip

Subtle background patterns

Want a great subtle background pattern for your site design? Look no further than http://www.subtlepatterns.com. This...