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:
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: 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.