Unable to pass function as argument to a mixin [du

2019-07-15 23:46发布

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?

标签: sass mixins
1条回答
你好瞎i
2楼-- · 2019-07-16 00:30

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);
}
查看更多
登录 后发表回答