Sass and Compass for Designers

The complement (and invert) functions

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