Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
User function approximation in server-side LESS (and a true greyscale "function")
@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 {
.usage_two {
.greyscale(@color, background-color);
.greyscale(#f00, border-color);
.bad_grayscale {
original-color: #ff8888;
desaturated: #c3c3c3;
greyscaled: #c3c3c3;
.usage_one {
color: #a1a1a1;
.usage_two {
background-color: #a1a1a1;
border-color: #363636;

This comment has been minimized.

Copy link
Owner Author

nemoDreamer commented Dec 7, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.