CODEWITHSUNDEEP
less
Nathan L.
Nathan L.

Reputation: 159

User defined functions with LessCSS?

I have just recently gotten into LessCSS and I am running into what I feel is major limitation and I was wondering if there was a way to do this?? I want to say I read somewhere that Sass allows for user defined functions but will LessCSS do the same?

What I'm wanting to do:

@fs: 16;

// either return the value
.s(@t,@s,@u) {
    // return @t/@s*@u;
}
#elem {
    margin-top: .s(30,@fs,1em);
    width: .s(900,@fs,1em);
    .child {
        width: .s(100,900,100%);
    }
}

// or have a property argument
.s(@t,@s,@u,@p) {
    @{p}: @t/@s*@u;
}
#elem {
    .s(30,@fs,1em,margin-top);
    .s(900,@fs,1em,width);
    .child {
        .s(100,900,100%,width);
    }
}

The only way I can figure it out, but it is very limited because I have to have multiple mixins:

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; }
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; }

I know I can always modify the less.js file to add a spacing function like the built-in round() or ceil() function. But, that kills the option of compiling the .less files for production using LessPHP, Crunch, SimpLess.

Upvotes: 7

Views: 11491

Answers (2)

Bass Jobsen
Bass Jobsen

Reputation: 49054

Notice that you also can easily add custom functions to the default Less compiler, which enable you to use the client side less.js compiler for testing and the command line lessc compiler for production.

For Less 1.x

  1. Download and unzip the source from github at: https://github.com/less/less.js/releases/latest
  2. Run npm install
  3. Open the lib/functions.js file

  4. Add your custom function (returncenter() in this example) inside the tree.functions object, for instance as follows:

    tree.functions = {
returncenter: function() {
return new(tree.Anonymous)('center');
},
//original function below
}

  5. Run grunt dist

After the preceding step you can include dist/less-1.x.x/js in your HTML or compile your Less code with the dist/lessc compiler.

For Less 2.x

  1. Download and unzip the source from github at: https://github.com/less/less.js/archive/master.zip
  2. Run npm install

  3. Create a file caleld lib/less/functions/custom.js and write down the following content into it:

    var Anonymous = require("../tree/anonymous"),
    functionRegistry = require("./function-registry");

functionRegistry.addMultiple({
returncenter: function() {
return new(Anonymous)('center');
}
});

  4. Open the lib/less/function/index.js file and append require("./custom"); to the list of register functions, just before return functions;

  5. Run grunt dist

Now you can use the following Less code:

selector {
property: returncenter();    
}

The preceding Less code will compile into the following CSS code:

selector {
property: center;    
}

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

As far as I know, there's no property argument: you must write it down.

That is, a function will return a calculated value or instruction(s) (property/ies and calculated values).

There aren't thousands of properties in CSS, it's not a CMS with hundreds of classes and functions, so your list won't be as long as you can imagine. You should use other CSS preprocessors or a backend language to generate your CSS if you want to do such complicated things. Or better keep it simple.
That said, lessphp allows for user functions:

lessphp has a simple extension interface where you can implement user functions that will be exposed in LESS code during the compile. They can be a little tricky though because you need to work with the lessphp type system.

Upvotes: 2

Related Questions