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...