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 adjust-hue function


The adjust-hue function can produce exactly the same effect as complement:

background-color: adjust-hue($color1, 180deg);

However, with adjust-hue, it's possible to vary the color produced by varying the degree of hue (it can be a positive or negative value). Let's use this on the third list item:

background-color: adjust-hue($color1, 90deg);

Here is the generated CSS:

.chapter-summary:nth-child(3) a {
  background-color: #80ff00;
}

The following screenshot shows what that gives us in the browser:

The adjust-hue function can be applied to any color value. It can accept a degree range from 0 to 360 (in CSS the degree is written as 20deg or 290deg for example).