无法将函数作为mixin的参数传递 [英] Unable to pass function as argument to a mixin

问题描述

我正在尝试在Sass中创建一个mixin以用于:hover动作，但是我无法使其工作.

我声明了混合:

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

我的想法是使用 Sass脚本功能通过基本变亮或变暗来更改悬停时链接的颜色.因此，例如，我尝试:

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

$footer-text-color是我先前定义的变量，它等于十六进制颜色，例如#84b3c8.

我希望这与

相同

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

相反，它在普通CSS中的编译方式是:

color: darken #84b3c8, 5%;

因此，很明显，颜色功能无法正常工作，但我真诚地不明白为什么.我确定这有点愚蠢，也许是mixin参数中的变量和字符串值之间的混合?

解决方案

在Sass中，函数和混合不是 first-class ，这意味着它们不能作为参数传递给其他函数或混合. >

在Sass 3.3中，有一个名为call()的新功能，它将为您提供所需的行为:

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

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:

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

这篇关于无法将函数作为mixin的参数传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！