Sass and Compass for Designers

The mix function

You can mix two colors together in Sass using the mix function. Let's use the mix function for the eighth list item link:

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

Here's how the syntax works. First, after defining the function and opening the parenthesis, we pass two color values separated by a comma. As with all the color functions, you can use actual values or a variable. Then, after a second comma, we specify the weight of the mix.

The weight value is used to specify how much of the first color is mixed in with the second. In our preceding example, we are mixing in 60 percent of red (#FF0000 as defined in the variable $color1) into orange (#FFBF00 as defined in the variable $color2).

The following code is ...