Sass and Compass for Designers

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%); ...