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.
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”.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.