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 scale-color function


The prior adjust-color changes a color by a set amount; scale-color on the other hand adjusts a color by an amount based upon what it already is. That will make more sense if we look at a few examples.

Let's remove the prior list item colors and leave just the first one as red (set by the variable $color1).

Now let's add two further rules for the following two list item links, one using adjust-color and the final one using scale-color. However, notice that the same numerical value is being passed to each color function to demonstrate the difference:

&:nth-child(1) a {
  background-color: $color1;
}
&:nth-child(2) a {
  background-color: adjust-color($color1,$lightness:-20%);
}
&:nth-child(3) a {
  background-color: scale-color($color1,$lightness:-20%);
}  

Following is the CSS generated by that Sass:

.chapter-summary:nth-child(1) a {
  background-color: red;
}
.chapter-summary:nth-child(2) a {
  background-color: #990000;
}
.chapter-summary:nth-child(3) a...