We just used the complement
color function in our mixin. It takes a color value and then computes a value that is 180 degrees opposite on the HSL color wheel. Let's add a background color to our chapter lists on the website and then test complement
and other Sass and Compass color functions out:
.chapter-summary { &:nth-child(1) a { background-color: $color1; } &:nth-child(2) a { background-color: complement($color1); } }
In this example, the first list item link is getting a background value of red (that's what the variable $color1
is set to) and the second list item link is getting a background color that is a complementary color of that. Here's the generated CSS:
.chapter-summary:nth-child(1) a { background-color: red; } .chapter-summary:nth-child(2) a { background-color: cyan; }