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 ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.