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 saturate and desaturate functions


The saturate and desaturate functions adjust the saturation value for a color. Let's use this to create a color for our next list item:

&:nth-child(4) a {
  background-color: desaturate($color1, 80%);
}

Here is how that compiles in CSS:

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

And the following screenshot shows our fourth list item in the browser (note that the dotted borders on the list items have been removed at this point for clarity):

The saturate function increases the saturation level of a color. We'll use it on the fifth list item along with a hex value instead of a variable (just because we can):

&:nth-child(5) a {
  background-color: saturate(#996666, 40%);
}

The following screenshot shows it in the browser: