SASS: why opacify() works differently than I expect

1

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

Thank you for any help and explanations!

3

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
4

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

5

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.

6

I just wanted to make the color fully transparent with transparentize() and then add an animation on hover so it becomes less transparent. :slight_smile: