This question already has an answer here:
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?
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: