通过函数或在SASS中通过引用混合 [英] Pass function or mixin by reference in SASS

问题描述

有没有办法通过引用另一个函数或mixin在SASS中传递一个函数或mixin，然后调用被引用的函数或mixin？

Is there any way to pass a function or a mixin by reference to another function or mixin in SASS, and then call the referenced function or 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?

推荐答案

函数和混合不是一流的

你可以得到的最接近的是 @content 指令（Sass 3.2 +）。

The closest you can get is with the @content directive (Sass 3.2+).

@mixin bob {
    a {
        @content;
    }
}

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

唯一的注意事项 @content 看不到你的mixin里面有什么。换句话说，如果 c 只在 bob mixin中定义，那么它本质上不会存在，

The only caveat is that the @content can't see what's inside your mixin. In other words, if c was only defined inside the bob mixin, it essentially wouldn't exist because it isn't considered in scope.

从3.3开始，您可以使用 call（）函数，但它仅用于函数，而不是mixins。这需要传递包含函数名称的字符串作为第一个参数。

Starting with 3.3, you can use the call() function, but it is only for use with functions, not mixins. This requires passing string containing the name of the function as the first argument.

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

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

@include bob('foo');

这篇关于通过函数或在SASS中通过引用混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！