Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 the resultant CSS:

.chapter-summary:nth-child(8) a {
  background-color: #ff4c00;
}

As you might imagine, in the browser it produces a very reddish-orange: