April 2013
Intermediate to advanced
274 pages
5h 39m
English
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%); ...Read now
Unlock full access