Hi there,
I’m playing around with SASS and could you please help me to understand why in my example (https://codepen.io/timagixe/pen/abzxdPx) when the link is hovered the border-bottom is full opacity.
As far as I understand it should be the same as rgba(0, 0, 0, 0.5) but it is not. 
Thank you for any help and explanations!
Check out the docs for the opacify function. It sounds like you may have misunderstood what the function does.
Makes $color more opaque.
The $amount must be a number between 0 and 1 (inclusive). Increases the alpha channel of $color by that amount.
// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a **fully opaque color**. @debug opacify(rgba(#036, 0.7), 0.3); // #036
Yes, I’ve understood it right. It makes color opaque. If it opacity is 1 - the color is not transparent at all, and if 0 - vice versa.
What else I’ve found in docs is this:
Because
opacify()is usually not the best way to make a color more opaque, it’s not included directly in the new module system.
So now it makes sense why this function is not workin’ as I use the last version of SASS.
And I guess I have to use transparentize() function here to make the color half opaque.
@lasjorg, thanks anyway 
Maybe I’m just not understanding your original post and code. But transparentize does the exact opposite of that opacify does.
opacify: Makes $color more opaque (opaque means not transparent)
transparentize: Makes $color more transparent
So just to be clear, opacify takes color with transparency and makes it less transparent (i.e. more opaque) and transparentize takes a color with transparency and makes it more transparent.
Anyway, I just wanted to make sure I understand what you are trying to do.
I just wanted to make the color fully transparent with transparentize() and then add an animation on hover so it becomes less transparent.
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.