css - 在 SASS 中通过引用传递函数或 mixin

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 中不是一流的，这意味着您不能像使用变量那样将它们作为参数传递。

Sass 3.2 及更早版本

最接近的方法是使用 @content 指令(Sass 3.2+)。

@mixin foo {
    a {
        @content;
    }
}

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

唯一需要注意的是 @content 看不到你的 mixin 里面有什么。换句话说，如果 c 仅在 bob 混合宏中定义，它基本上不会存在，因为它不在范围内。

Sass 3.3 及更新版本

从 3.3 开始，您可以使用 call() 函数，但它只能与函数一起使用，不能与 mixins 一起使用。这需要传递包含函数名称的字符串作为第一个参数。

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

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

@include bob('foo');