User function approximation in server-side LESS (and a true greyscale "function")

01_user_function.less

@color: #f88;

/* LESS admits that their greyscale function doesn't respect relative lightness */

.bad_grayscale {
  original-color: @color;
  desaturated: desaturate(@color, 100%);
  greyscaled: greyscale(@color); // synonymous
}

/* so let's FIX that! */

.greyscale(@color; @keyword: color) {
  @{keyword}: hsl(0, 0, luma(@color));
}

.usage_one {
  .greyscale(@color);
}

.usage_two {
  .greyscale(@color, background-color);
  .greyscale(#f00, border-color);
}

02_outputs.css

.bad_grayscale {
  original-color: #ff8888;
  desaturated: #c3c3c3;
  greyscaled: #c3c3c3;
}
.usage_one {
  color: #a1a1a1;
}
.usage_two {
  background-color: #a1a1a1;
  border-color: #363636;
}

Unless you are using LESS client-side, you can’t define your own functions (similar to max() or lighten()) that return a value.

As a reminder, client-side usage works as follows:

less = {
  functions: {
    myfunc: function() {
      return new(less.tree.Dimension)(1);
    }
  }
};

Here’s an elegant server-side solution that — while not giving you return values — does give us a close approximation of a user function in LESS. As you can see, we’re using variable interpolation and default values on a function mixin to achieve a pretty flexible result.