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
Web Browser
Functions and Operations

Arithmetic and Color

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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.