Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
main.css
Web Browser
Learn

As mentioned, Sass specifically comes equipped with functions that make working with colors easier.

The alpha parameter in a color like RGBA or HSLA is a mask denoting opacity. It specifies how one color should be merged with another when the two are on top of each other.

  • In Sass, the function fade-out makes a color more transparent by taking a number between 0 and 1 and decreasing opacity, or the alpha channel, by that amount:
$color: rgba(39, 39, 39, 0.5); $amount: 0.1; $color2: fade-out($color, $amount);//rgba(39, 39, 39, 0.4)
  • The fade-in color function changes a color by increasing its opacity:

    $color: rgba(55,7,56, 0.5); $amount: 0.1; $color2: fade-in($color, $amount); //rgba(55,7,56, 0.6)
  • The function adjust-hue($color, $degrees) changes the hue of a color by taking color and a number of degrees (usually between -360 degrees and 360 degrees), and rotate the color wheel by that amount.

Report a Bug
If you see a bug or any other issue with this page, please report it here.