Since version 2 of Less you can use plugins. You can also use these plugins to add custom function to Less, examples: https://github.com/less/less-plugin-advanced-color-functions/ and https://github.com/bassjobsen/less-plugin-cubehelix
Inspired on https://github.com/less/less.js/issues/2341 i want to add a custom function twotimesandten to less, so that:
@start: 10; .test { result: twotimesandten(@start); }
compiles into:
.test { result: 30; }
After reading http://lesscss.org/usage/#plugins-for-plugin-authors, i wonder how to do this?
First write the plugin for usage in the browser. You create the plugin using the following code:
var TwoTimesAndTen = { install: function(less) { less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} ); } }; less = { env: "development", plugins: [TwoTimesAndTen] };
Notice that you should write the name of your function lower-cased always.
To use the above code for the command line compiler you should create a file named less-plugin-twotimesandten/index.js. That file should contain the following code:
var TwoTimesAndTen = { install: function(less) { less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} ); } }; module.exports = TwoTimesAndTen;
Then you can run the following command in your console:
echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --plugin=less-plugin-twotimesandten/index.js -
The above will output:
.test { result: 30; }
To install this plugin for global usage you should create a second file named less-plugin-twotimesandten/package.json. The package.json should contain at least the following lines of code:
{ "name": "less-plugin-twotimesandten", "version": "0.0.1", "description": "twotimesandten plugin for less.js", "main": "index.js" }
After saving the package.json file you can run the following command in your console:
npm install less-plugin-twotimesandten
Make sure you navigate outside your less-plugin-twotimesandten directory first. In the preceding command less-plugin-twotimesandten is the path to your plugin.
Now you can run the following command:
echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --twotimesandten -
To write a plugin that runs both client and server side you should read: http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/ (feel free to contribute to https://github.com/less/less-meta/issues/5 too).
Rewrite the content of your less-plugin-twotimesandten/index.js as follows:
(function(exports){ exports.install= function(less) { less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} ); }; })(typeof exports === 'undefined'? this['TwoTimesAndTen']={}: exports);
The above does not change command line usage. For brower usage you can now use the following code:
