如何利用插件使用自定义函数来执行Less编译器 [英] How to exend the Less compiler with a custom function leveraging a plugin

问题描述

从Less版本2开始，您可以使用插件。您还可以使用这些插件向Less添加自定义功能，例如： https：/ /github.com/less/less-plugin-advanced-color-functions/ 和 https ：//github.com/bassjobsen/less-plugin-cubehelix

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

启发 https://github.com/less/less.js/issues/2341 我想添加一个自定义函数 twotimesandten 更少，所以：

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);
}

汇编成：

.test {
result: 30;
}

阅读 http://lesscss.org/usage/#plugins-for-plugin-authors ，我想知道该怎么做？

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]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

请注意，您应该始终将函数的名称写下来。

Notice that you should write the name of your function lower-cased always.

将以上代码用于命令行编译器你应该创建一个名为 less-plugin-twotimesandten / index.js 的文件。该文件应包含以下代码：

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 -

以上将输出：

.test {
  result: 30;
}

要安装此插件以供全局使用，您应该创建一个名为<$的第二个文件C $ C>少-插件-twotimesandten /的package.json 。 package.json应至少包含以下代码行：

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"
}

保存package.json文件后，您可以在控制台中运行以下命令：

After saving the package.json file you can run the following command in your console:

npm install less-plugin-twotimesandten

确保首先在 less-plugin-twotimesandten 目录之外导航。在前面的命令 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 -

要编写一个同时运行客户端和服务器端的插件，您应该阅读： http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/ （随时可以参与 https://github.com/less/less-meta/issues/5 ）。

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).

重写 less-plugin-twotimesandten / index.js 的内容，如下所示：

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:

<script src="less-plugin-twotimesandten/index.js"></script>
<script>
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

这篇关于如何利用插件使用自定义函数来执行Less编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！