Implement Functional Programming in Sass
Tags: sass, clojure, showdev
Published: 2023-07-11 17:42:52

<span>A</span> few years ago, I started learning the [ClojureScript](https://clojurescript.org/) language and quickly became fascinated with functional programming. One day, I wondered if it would be possible to implement a similar programming style in Sass, allowing for anonymous functions and [threading macros](https://clojure.org/guides/threading_macros). After conducting some experiments, I came up with the following Sass functions:

```scss
.map-function {
  property: map(inc, 1, 2, 3); // (2, 3, 4)
}

.filter-function {
  property: filter(odd, 1, 2, 3); // (1, 3)
}

.reduce-function {
  property: reduce((plus _1 _2 _2), "#", [ "a", "b", "c" ]); // #aabbcc
}

.assoc-function {
  property: assoc([1 2 3], 2, (a b)); // [1 (a b) 3]
}

.thread-last-function {
  property: thread-last(1, inc, (plus 10 5), dec, ("math.pow" 2)); // 65536
}
```

It turns out to be quite doable. The magic began with the [Clojure Function Literal](https://clojure.org/guides/higher_order_functions#_function_literals) style anonymous function, `#(println %1 %2 %3)`, which can be passed to iterator functions and threading functions. For syntax reasons, I used `_` as the placeholder for a single parameter or `_1`, `_2`, and so on for multiple parameters.

In this post, I will explain how to accomplish this. Let's take the `reduce()` function as an example:

```scss
@use "sass:list";

@function plus($args...) {
  // Return the sum of $args
}

.reduce-function {
  property: reduce((plus _1 _2 _2), "#", [ "a", "b", "c" ]); // #aabbcc
}
```

In this case, `_1` represents the accumulator, and `_2` represents the current value. The function literal is a parentheses list, also known as the [S-expression](https://en.wikipedia.org/wiki/S-expression), and the Sass list is fully capable of handling this syntax. Therefore, the first step is to create a caller that accepts a Sass list, takes the first item in the list as the function name, and the rest items as arguments. It would look something like this:

```scss
@use "sass:meta";

@function call-fn($fn, $args...) {
  @return meta.call(meta.get-function($fn), $args...);
}
```

As such, `call-fn(plus, 1, 2, 3)` is converted to `plus(1, 2, 3)`. The `meta.call()` is used to invoke the `$fn` with `$args`, and the `meta.get-function()` ensures that the passed-in function is callable.

This is just a basic concept. In the actual case, `$fn` would be an S-expression, and we need to replace the `_` placeholder inside with the values in `$args`. So let's update the `call-fn()` to a `call-lambda()` function that can convert `call-lambda((plus, _1, _2), 10, 100)` to `plus(10, 100)`.

```scss
@use "sass:list";
@use "sass:meta";

@function first($list) {
  // Return the first $list
}
@function rest($list) {
  // Return the rest items in $list
}

@function replace-args($args, $values) {
  @for $_i from 1 through list.length($values) {
    @if $_i == 1 {
      $_index: list.index($args, _) or list.index($args, _1);

      @while $_index != null {
        $args: list.set-nth($args, $_index, list.nth($values, 1));
        $_index: list.index($args, _) or list.index($args, _1);
      }
    } @else {
      $_index: list.index($args, _#{$_i});

      @while $_index != null {
        $args: list.set-nth($args, $_index, list.nth($values, $_i));
        $_index: list.index($args, _#{$_i});
      }
    }
  }

  @return $args;
}

@function call-lambda($lambda, $args...) {
  $_fn: first($lambda);
  $_lambda-args: replace-args(rest($lambda), $args);

  @return meta.call(meta.get-function($_fn), $_lambda-args...);
}
```

In the `replace-args()` function, use a `@while` loop to support cases where the `_` placeholder appears multiple times.

Here, we have a problem. The `meta.get-function()` cannot directly get a Sass module function. For example, `meta.get-function("list.index")` is invalid. The correct way would be `meta.get-function("index", false, "list")`. So, let's create a new `get-function()` function to detect if the passed-in function is a Sass module method, and if so, extract the module name and the method name.

```scss
@use "sass:meta";
@use "sass:string";

@function get-function($fn) {
  $_dot-index: string.index($fn, ".");

  @if $_dot-index {
    $_module: string.slice($fn, 1, $_dot-index - 1);
    $_fn: string.slice($fn, $_dot-index + 1, -1);

    @return meta.get-function($_fn, false, $_module);
  } @else {
    @return meta.get-function($fn);
  }
}
```

We're almost done, there's only one thing left. In iterator functions or threading functions, we can either pass an anonymous function or a named function. We already have the `call-fn()` and `call-lambda()` functions, so let's add a new `auto-call()` function to detect the type of the passed-in function, and correspondingly choose to invoke `call-fn()` or `call-lambda()`:

```scss
@use "sass:meta";

@function auto-call($fn, $args...) {
  $_type: meta.type-of($fn);

  @if $_type == string {
    @return call-fn($fn, $args...);
  } @else if $_type == list {
    @return call-lambda($fn, $args...);
  } @else {
    @error "#{$fn} is not a function. Please make sure that #{$fn} is defined as a function before calling it.";
  }
}
```

Finally, based on the previous work, implementing the `reduce()` function or other functions becomes much simpler. Check the [source code](https://github.com/P233/lambda-sass/blob/master/src/lambda.scss) for more examples.

```scss
@function reduce($fn, $init, $list...) {
  $_result: $init;

  @each $_i in $list {
    $_result: auto-call($fn, $_result, $_i);
  }

  @return $_result;
}
```

This project has been published as an NPM package named [lambda-sass](https://github.com/P233/lambda-sass). The syntax was borrowed from Clojure, but the project name was inspired by the Lisp lambda function. I'd be delighted to see what you create using this library. If you find any functions missing, feel free to inform me or contribute by submitting a pull request.