The transparentize/fade-out functions

Need to create a color with an alpha channel? Just tell Sass how transparent it needs to be and it will do the heavy lifting. The best bit is that you don't even need to pass Sass a color value that already has an alpha channel. It will transform the color into an RGBA value for you. Let's use the transparentize function on the sixth list item:

&:nth-child(6) a {
  background-color: transparentize($color1, .5);
}

After passing the color, the transparentize function expects a value between 0 (entirely transparent) and 1 (entirely opaque). Here we are using .5.

Tip

fade-out can be used instead of transparentize if you would rather, as it has the same effect. The rgba function also shares similarities, more of which shortly.

Now, remember, $color1 has a hex color as its value (#FF0000), and yet on compile, this is what the function produces for us in CSS:

.chapter-summary:nth-child(6) a {
  background-color: rgba(255, 0, 0, 0.5);
}

A color value defined as...