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-outmakes 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)
fade-incolor 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)
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.
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”.