Skip to Content
Learn
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.

Instructions

1.

In main.scss, fade-out $lagoon-blue by 0.5:

$lagoon-blue: fade-out(#62fdca, 0.5);

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Do you see how the blue is now a ligher shade? It’s 50% more “transparent”.

Folder Icon

Sign up to start coding

Already have an account?