User defined functions with LessCSS? - less

Question

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.

Answer 1

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.

Answer 2

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
Download and unzip the source from github at: https://github.com/less/less.js/releases/latest
Run npm install
Open the lib/functions.js file
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
}
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
Download and unzip the source from github at: https://github.com/less/less.js/archive/master.zip
Run npm install
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');
}
});
Open the lib/less/function/index.js file and append require("./custom"); to the list of register functions, just before return functions;
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;
}