Question

I'm trying to create a mixin in Sass to use for the :hover actions but I can't make it work.

I declare the mixin:

@mixin hover($action, $color, $amount) {
    color: $action($color, $amount);
}

My idea is to use Sass Script Funcions to change the color of the link on hover by basically lightening or darkening it. So for example I try:

a {
    &:hover {
        @include hover(darken, $footer-text-color, 5%);
    }
}

$footer-text-color is a variable I have previously defined which is equal to an hex color, such as #84b3c8.

I would expect this to be identical to

 a {
    &:hover {
        color: darken($footer-text-color, 5%);
    }
}

Instead, what it's compiled in plain CSS is:

color: darken #84b3c8, 5%;

So obviously the color function is not working but sincerely I can't understand why. I'm sure it's something silly, maybe the mix between variables and string values in the mixin's arguments?

Was it helpful?

Solution

Functions and mixins are not first-class in Sass, meaning they cannot be passed as arguments to other functions or mixins.

In Sass 3.3, there is a new function called call() which will give you the behavior you're looking for:

@mixin hover($action, $color, $amount) {
    color: call($action, $color, $amount);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top