User Defined Functions Using LessCSS?

Question

I only recently got involved in LessCSS, and I am facing what, in my opinion, is the main limitation, and I was wondering if there is a way to do this? I mean, I read somewhere that Sass allows user-defined functions, but will LessCSS do the same?

What I want 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 to understand this, but it is very limited, because I have to have several 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 that I can always modify the less.js file to add an interval function, such as the built-in round() or ceil() function. But this kills the ability to compile inactive files for production using LessPHP, Crunch, SimpLess.

Answer 1

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

That is, the function will return the calculated value or instruction (properties) (properties and values).

There are no thousands of properties in CSS; they are not CMS with hundreds of classes and functions, so your list will not be as long as you can imagine. You must use other CSS preprocessors or the base language to generate your CSS if you want to do such complex things. Or better to keep it simple.
However, lessphp allows you to perform user functions :

lessphp has a simple extension interface where you can implement custom functions that will be displayed in LESS code at compile time. They can be a little complicated because you need to work with a system like lessphp.

Answer 2

Note that you can also easily add custom functions to the default Less compiler, which allows you to use the client. less.js compiler less.js for testing, and the lessc command line lessc to create.

For less than 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 own function ( returncenter() in this example) inside the tree.functions object, for example, as follows:

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

• Run grunt dist

After the previous step, you can include dist / less-1.xx / js in your HTML or compile Less code using the dist/lessc .

Less than 2.x

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

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

   var Anonymous = require("../tree/anonymous"), functionRegistry = require("./function-registry"); functionRegistry.addMultiple({ returncenter: function() { return new(Anonymous)('center'); } }); 

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

• Run grunt dist

Now you can use the following Less code:

 selector { property: returncenter(); } 

The previous Less code will be compiled into the following CSS code:

 selector { property: center; }