Question

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?

For example:

@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

Functions and mixins are not first-class in Sass, meaning you can’t pass them around as arguments like you can with variables.

Sass 3.2 and older

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

@mixin foo {
    a {
        @content;
    }
}

@include bob {
    b: foo(c); // this replaces `@content` in the foo 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.

Sass 3.3 and newer

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');