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