Sass and Compass for Designers

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, ...