通过SASS中的引用传递函数或混合

Question

有什么方法可以通过引用SASS中的另一个函数或mixin来传递函数或mixin，然后调用引用的函数或mixin？

例如：

@function foo($value) {
    @return $value;
}

@mixin bob($fn: null) {
    a {
        b: $fn(c); // is there a way to call a referenced function here?
    }
}

@include bob(foo); // is there any way I can pass the function "foo" here?

Answer 1

在Sass中，函数和混合函数不是 一流 的，这意味着您不能像传递变量那样将它们作为参数传递。

最接近的@content指令是（Sass 3.2+）。

@mixin foo {
    a {
        @content;
    }
}

@include bob {
    b: foo(c); // this replaces `@content` in the foo mixin
}

唯一需要注意的是，@content您无法看到mixin内部的内容。换句话说，如果c仅在bobmixin
内部定义，则它实际上将不存在，因为不在范围内。

Sass 3.3及更高版本

从3.3开始，可以使用该call()函数，但仅用于函数，不能用于混合。这需要传递包含函数名称的字符串作为第一个参数。

@function foo($value) {
    @return $value;
}

@mixin bob($fn: null) {
    a {
        b: call($fn, c);
    }
}

@include bob('foo');